We can say that obtaining information about accesses, conversions, and leads in projects you are working on is essential. Whether it's a personal or business website, tracking visits and interaction with your product or service is indeed very important. And one way to do this is by using a simple yet very powerful tool, UTM parameters.
What is UTM?
UTM - Urchin Traffic Monitor are parameters added to URLs. The tags track and measure the effectiveness of online campaigns, meaning you can identify which content works and where it works best. This parameterization will detail the overall origin of the traffic, making it possible to analyze the performance of different campaigns and marketing channels.
What are UTM Tags?
utm_source
This parameter indicates the source, the referring source that sent the traffic. That is, it will show where users are coming from to reach you. Some examples are search engines: Google, Instagram, YouTube, email ad...utm_medium
Indicates the means by which the link was shared or accessed, some examples: informative email, Instagram bio link, link in the YouTube video description, cost-per-click ad.utm_campaign
Indicates a specific promotion, product, or campaign associated with the link, for example: tennis_new_b_launch, black_friday, discount_10.utm_term
Mainly used in sponsored link campaigns, this parameter is used to identify the keywords that triggered the ad.utm_content
Used to differentiate variations of the same ad or identify exactly what was clicked to bring the user. If we have two different buttons in the same ad, we can differentiate them with this tag.
Example of a URL:
https://woovi.com?utm_source=youtube&utm_medium=video_description&utm_campaign=pix_checkout
To add the tags to the landing pages on Woovi, we call the function linkUtmBuilder below:
const linkUtmBuilder = (
mainUrl: string,
utmParams: { [key: string]: string },
): string | object => {
const utmsValid = [
'utm_source',
'utm_medium',
'utm_campaign',
'utm_term',
'utm_content',
];
const isUtmValid = Object.keys(utmParams).every((key) =>
utmsValid.includes(key),
);
if (isUtmValid) {
const utmQueryString = Object.entries(utmParams)
.map(
([key, value]) =>
`${key.toLowerCase()}=${value.toLowerCase().replace(/[\s-]/g, '_')}`,
)
.join('&');
const urlWithUtm = `${mainUrl}${
mainUrl.includes('?') ? '' : '?'
}${utmQueryString}`;
return urlWithUtm;
}
return {
message: 'Some utm tag is incorrect',
};
};
The function accepts two parameters: the main URL where the UTM parameters will be added, and an object specifying the tag and its value.
Firstly, we check the validity of the parameters passed. If they are considered valid, we perform a simple formatting, replacing any spaces or hyphens with underscores, according to the standard formatting for the tags defined by our team. Then, we return the complete URL with the formatted parameters. If any parameter is not valid, we issue a message indicating that one of the UTM tags is incorrect.
Remember
It is important to maintain a standard for the tags. If you use the word 'youtube' all lowercase, then always standardize using this format. Also, always choose only one symbol, for example, always a hyphen or always an underscore to separate the words. And remember, UTM tags are query strings, so they are always composed of a key-value pair separated by '&'.
Conclusion
Finally, we have seen that the use of UTM parameters can offer valuable insights into the performance of content and marketing channels. Therefore, by assigning tags such as utm_source, utm_medium, utm_campaign, utm_term, and utm_content, it will be possible to identify the origin, the medium, the specific campaign, and even the keywords that led visitors to our site.
This allows, especially for marketing professionals, a more comprehensive view of traffic, a deeper understanding of visitor behavior, and the optimization of digital marketing strategies to achieve better results.
If you want to work in a startup in its early stages, This is your chance. Apply today!
Woovi is a Startup that enables shoppers to pay as they please. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.
Photo by Jess Bailey na Unsplash
Top comments (2)
This function is interesting, can you pull the utm on other pages too? In the case when there is a redirection to the form page, for example.
Currently I deal a lot with utm's too, but I have been using
useEffect
and theURLSearchParams
method to be able to capture utms on several pagesAwesome!