"UTM" stands for "Urchin Tracking Module" and is a way to track the effectiveness of your marketing campaigns. It is a URL parameter that is added to the end of a link. For example, https://domain.com/?utm_source=example&utm_medium=example&utm_id=example.
According to Collect campaign data with custom URLs blog, Google Analytics can track utm by the following parameters:
| parameters | requried | required |
|---|---|---|
| utm_source | Identify the advertiser, site, publication | yes |
| utm_medium | The advertising or marketing medium, for example: cpc, banner, email newsletter | yes |
| utm_campaign | The individual campaign name, slogan, promo code, etc. for a product. | yes |
| utm_term | Identify paid search keywords. | no |
| utm_content | Used to differentiate similar content, or links within the same ad. | no |
In order to understand what and how UTM work in Google Analytics, you can read Google Analytics UTM parameters explained.
- Generate UTM link with parameters
- Generate short link with UTM parameters using https://short.io API with custom domain
Environment variables are stored in .env file. It contains the following variables:
| Variable Name | Description |
|---|---|
| VITE_SHORT_IO_DOMAIN | the custom domain for the shorten link |
| VITE_SHORT_IO_PUBLIC_KEY | the public api key for https://short.io |
To get the short.io public API key.
- Enter https://short.io/docs/api.
- Click "Create API key".
- Add a Public key.
⭐️ Feel free to fork this project and change the domain to your own by changing the environment variables.
Contributions are welcome! Feel free to open an issue or submit a pull request. This project based on SvelteKit. You can read the SvelteKit documentation to learn about SvelteKit.
Once you clone the project, first you need to install the dependencies
pnpm installThen, you can run the project in development mode
pnpm devThe project will be running at http://localhost:5173/.
To build the static site for production, please run
pnpm build
This project is developed using Github Page. It's use gh-pages branch to deploy the static site. This project already provides Github Action for deployment.
To deploy the project, one thing you have to do is dispatching the Deployment Workflow then the site will be deployed automatically using latest version of main branch.