How to get UTM parameters from URL?

UTM parameters are an essential tool for tracking marketing campaigns and analyzing traffic sources. When a user clicks on a link that contains UTM parameters, those parameters are appended to the destination URL. The UTM parameters allow you to see which campaigns, ads, keywords, or other sources led the user to click that link. In this comprehensive guide, we will explain what UTM parameters are, why they are useful, and provide step-by-step instructions on how to easily extract UTM parameters from a URL using JavaScript, PHP, and Google Analytics.

What are UTM parameters?

UTM stands for Urchin Tracking Module, named after a web analytics company purchased by Google. The UTM parameters allow you to tag landing page URLs so that you can track visits, conversions, etc. from a specific campaign, ad group, keyword, or other source. Each UTM parameter has a specific purpose:

• utm_source – Identifies which site sent the traffic. For example: google, newsletter, socialmedia
• utm_medium – Identifies what type of link was used. For example: cpc, banner, email
• utm_campaign – Used to identify a specific product promotion or strategic campaign
• utm_term – Identifies search terms
• utm_content – Used to differentiate ads

When added to a URL, the UTM parameters look like this:

http://www.example.com?utm_source=twitter&utm_medium=social&utm_campaign=summerpromo

The source, medium and campaign UTM parameters are the most commonly used. Using UTM parameters allows you to easily see in your analytics platform the sources and campaigns that are driving traffic and conversions on your site.

Why are UTM parameters useful?

There are several reasons why UTM parameters are incredibly useful for marketers and analysts:

• Track traffic sources – Easily identify which social networks, keyword campaigns, emails, etc. are sending you the most visitors.
• Measure ROI – Determine which marketing initiatives are driving conversions and revenue.
• Attribute conversions – See which campaigns and sources lead to goal completions like form fills, purchases, etc.
• Analyze campaign content – See which UTM tagged content performs the best.
• Compare channels – Identify which mediums like social, email, PPC are most effective.
• Optimize campaigns – Double down on high performing sources and prune ineffective campaigns.

Without UTM parameters, you are left guessing which sources are actually sending high quality traffic to your site. By tagging your links with UTM parameters, you unlock a trove of actionable data to optimize your marketing and improve ROI.

How to add UTM parameters to URLS

Adding UTM parameters to your URLs is quite straightforward. Here is the basic structure:

http://www.yourdomain.com?utm_source=SOURCE&utm_medium=MEDIUM&utm_campaign=CAMPAIGN

Just append the utm_ tags to the end of your URL with the corresponding values filled in. Make sure each parameter is separated by an ampersand & symbol.

Some examples:

• utm_source=facebook&utm_medium=social&utm_campaign=spring_sale
• utm_source=google&utm_medium=cpc&utm_campaign=product_keywords
• utm_source=newsletter&utm_medium=email&utm_campaign=march_promotion

Try to keep the utm_source, medium and campaign values consistent across your marketing efforts. For example, always tag your Facebook traffic as utm_source=facebook. This consistency will ensure your data is easier to interpret in your web analytics platform.

How to extract UTM parameters from URL with JavaScript

If you want to extract the UTM parameters from a URL using JavaScript, you can use the URLSearchParams API:

<script>
  const url = new URL('https://www.example.com?utm_source=twitter&utm_medium=social');

  const urlParams = new URLSearchParams(url.search);

  const utmSource = urlParams.get('utm_source'); 
  // utmSource = 'twitter'

  const utmMedium = urlParams.get('utm_medium');
  // utmMedium = 'social' 
</script>

First create a new URL object from the full URL string. Then use URLSearchParams to parse out the different parameters into key-value pairs that you can access.

You can also loop through all the UTM parameters like this:

<script>
  const url = new URL('https://www.example.com?utm_source=twitter&utm_medium=social');

  const urlParams = new URLSearchParams(url.search);

  urlParams.forEach((value, key) => {
    console.log(key, value);
  });
</script>  

This allows you to easily extract all the UTM data from a URL using native JavaScript.

How to get UTM parameters from URL in PHP

Extracting UTM parameters from a URL in PHP is also quite straightforward using the parse_url() and parse_str() functions:

<?php

$url = 'http://www.example.com?utm_source=twitter&utm_medium=social';

// Parse the URL 
$urlParts = parse_url($url);

// Extract the query string
$query = $urlParts['query'];

// Parse the query string to an array
parse_str($query, $params);

// Access the UTM parameters
$utmSource = $params['utm_source'];
$utmMedium = $params['utm_medium'];

?>

First we parse the full URL to get the individual components. Then we extract just the query string part containing the UTM parameters. Finally, we convert the query string into an associative array using parse_str() so that we can access the UTM parameters as array keys.

How to view UTM parameters in Google Analytics

The easiest way to view UTM parameters in Google Analytics is to create a campaign URL report:

1. Go to Acquisition > Campaigns > Campaign URL Builder
2. Select the date range for your report
3. Under “Campaign Source” select “Select value” to view a dropdown of all UTM sources
4. Under “Campaign Medium” select “Select value” to view UTM mediums
5. Under “Campaign Name” select “Select value” for UTM campaigns
6. Click “Apply” to generate the report

This report will show all the unique UTM parameter combinations along with visits, bounce rates, conversion rates and other useful data for each source/medium combination. This allows you to easily see which marketing channels are driving the most valuable traffic.

You can also view UTM parameters by applying “Secondary Dimension” filters to any standard report in Google Analytics:

1. Open any report like Acquisition > Overview
2. Click “+ Add Secondary Dimension”
3. Select “Campaign” to view source/medium
4. Select “Source/Medium” to view UTM source & medium data

Applying secondary dimensions allows you to view the UTM tags segmented across any report in Google Analytics. This provides flexibility to analyze the parameters across sessions, locations, technology, conversions, and more.

Tips for setting up UTM parameters

Here are some best practices when setting up UTM parameters for your marketing campaigns:

• Use descriptive consistent values – For example: utm_source=google, utm_medium=ppc
• Set campaign name to marketing initiative like utm_campaign=summer_sale
• Use UTMs on all links/ads across channels like social, email, etc.
• Shorten URLs using Bitly after adding UTM parameters
• Add UTM tags to redirects/301s from old URLS to maintain data
• Use UTMs on download/document links to track content performance
• Include UTMs on homepage links to identify key entry pages

By carefully tagging all your marketing URLs with descriptive UTM parameters, you will be able to unlock a goldmine of data in Google Analytics to drive insights and ROI.

Conclusion

Implementing UTM parameters is one of the most high-impact, low-effort optimizations you can make to improve your web analytics. By appending the utm_source, utm_medium and utm_campaign tags to your URLs, you can easily identify which marketing channels are driving traffic and conversions.

UTM parameters can be extracted using JavaScript URL parameters or PHP parsing functions. The tags can be viewed in Google Analytics using campaign reports or secondary dimensions. With some strategic planning in your implementation, UTM parameters provide the visibility needed to optimize your marketing attribution and improve your ad spend effectiveness.

So don’t wait – start adding UTM tags to your links today and unlock a new level of data-driven insights for your marketing and beyond!