This is it, you know it. Your latest marketing campaign is going to be a game-changer. Now, all that's left to do is prove its success. This is where UTM tracking can step in to help.
Note: Custom variables are used in the following setup. This feature is only available on paid plans.
UTM tracking is used by marketers to monitor things like campaign performance and where traffic to a webpage is coming from. If you add UTM parameters to the end of a URL, web analytics tools like Google Analytics are able to interpret this data and create analytics reports.
UTM is a Google Analytics tool and stands for Urchin Tracking Module (it was originally an Urchin product before being acquired by Google).
There are five standard UTM parameters that marketers add to the end of URLs: source, medium, campaign, term, and content.
You'll need to format them in the following way and add them to the end of your URL so Google Analytics and other analytics tools recognize them correctly:
- utm_source
- utm_medium
- utm_campaign
- utm_term
- utm_content
You can add UTM parameters to your videoask URLs, dynamically pass a UTM parameter from your landing page to a videoask embedded on that page, or pass a UTM parameter from a videoask to a site that you redirect your respondents to. Keep reading to learn how!
In this guide, we'll stick with utm_source in our examples, but you can add as many UTM parameters as you like.
Want to get a videoask hooked up to Google Analytics? Check out this article.
Jump to:
Add UTM parameters to your videoask URLs
Dynamically pass UTM parameters from your landing page to a videoask embedded on that page
Pass UTM parameters from your videoask to a landing page redirect
Add UTM parameters to your videoask URLs
You can add UTM parameters to your videoask URLs by using our custom variables feature and then connecting your videoask to Google Analytics to view analytics reports and keep track of where respondents interacted with your videoask.
For example, if you're sharing the same videoask on your website and across various social media channels, you'll probably want a breakdown of where your traffic is coming from. You can add a source parameter to the end of your URL and then customize it to reflect each source depending on where you share that link.
Note: A paid VideoAsk plan is required for this setup.
1. From your VideoAsk account, click on the videoask you want to add UTM parameters to.
2. Click the Share & Embed icon.
3. Click Add variables.
4. Select + Add custom variable.
5. Add your UTM parameter and click Save. In our example, we want to know where people have interacted with our videoask, so we'll add "utm_source".
Note: Custom variables must be alphanumeric (they can only contain letters and/or numbers), and you must use_underscores_to_separate_words.
Now you'll see your UTM parameter at the end of the URL:
6. Make sure to replace the placeholder Xs (XXXX) with the correct information before you share or embed your videoask. We'll be posting this videoask in the VideoAsk Community, so we've changed the placeholder Xs to reflect this:
If we decided to publish the same videoask on Facebook, we'd need to replace the Xs with "facebook".
7. If you embed your videoask on your site, make sure to replace the URL in the embed code with your updated URL that includes your UTM parameter.
8. Now, all that's left to do is connect your videoask to Google Analytics and watch the results roll in.
Dynamically pass UTM parameters from your landing page to a videoask embedded on that page
If you already have a UTM parameter set up to track where traffic landing on your site page is coming from, and you want to embed a videoask on that same page, you can pass the UTM parameter to the videoask by using a little bit of JavaScript code.
For example, if you've posted a link to your website on Facebook, and you've already set up a UTM parameter on your site to track the traffic coming from Facebook, you can pass that same UTM value to a videoask embedded on your site.
Note: This guide is for more advanced users. A paid VideoAsk plan is required for this setup.
1. From your VideoAsk account, select the videoask you want to embed on your site and pass the UTM value to.
2. Click the Share & Embed icon.
3. Click Add variables.
4. Select + Add custom variable.
5. Add your UTM parameter and click Save. We'll use one of Google Analytics' standard tracking parameters, "utm_source".
Note: Custom variables must be alphanumeric (they can only contain letters and/or numbers), and you must use_underscores_to_separate_words.
Now you'll see your UTM parameter at the end of the URL (we're going to come back to copy this URL in a moment):
6. Now, head over to your website builder and copy the following code below between the body tags (<body> </body>) of the HTML:
For a widget:
<script> var url_string = window.location.href; var url = new URL(url_string);
var utm_source = url.searchParams.get("utm_source");
window.VIDEOASK_EMBED_CONFIG
= { "kind": "widget", "url": "YOUR_VIDEOASK_URL_HERE#utm_source="
+ utm_source,
"options": {
"widgetType": "VideoThumbnailExtraLarge",
"text":
"",
"backgroundColor": "#FA6B05",
"position": "bottom-right",
"dismissable":
false
}
}
</script>
<script src="https://www.videoask.com/embed/embed.js"></script>
For an iframe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered iFrame</title>
<style>
html, body {
height:
100%;
margin: 0;
}
.centered-container {
display: flex; justify-content: center;
align-items: center;
height: 100%;
}
</style>
</head>
<body>
<div class="centered-container">
<iframe id="iframe" width="640" height="480"
frameborder="0" allow="camera *; microphone *; autoplay *; encrypted-media *;
fullscreen *; display-capture *;"></iframe>
</div>
<script>
var url_string = window.location.href;
var url = new URL(url_string);
var utm_source
= url.searchParams.get("utm_source");
var iframe = document.getElementById('iframe');
iframe.src = 'YOUR_VIDEOASK_URL_HERE?utm_source=' + utm_source;
iframe.style.border
= "none";
iframe.style.borderRadius = "24px";
</script>
</body>
</html>
💡 Pro tip: If you're looking to pass multiple UTM parameters from your landing page to your videoask iframe embedded on that page, check out this code snippet (you'll need to update the videoask URL with your own).
7. Now, go back to your VideoAsk account to grab your customized URL. Click the Copy button below the URL.
8. Paste the videoask URL into the code in your website builder to replace YOUR_VIDEOASK_URL_HERE, and delete the placeholder Xs:
Note: If you're embedding a widget, you can customize the styling, size, text, and background color directly in the code. If you're embedding an iframe, you can edit the width and height directly in the code. We're unable to provide support for custom CSS, so if your technical skills are limited, you may need to ask a developer friend for help with this.
And that's it! Now, your UTM parameter will be passed from your landing page to your videoask. You'll be able to view it in your videoask inbox by hovering over the ⓘ .
Pass UTM parameters from your videoask to a redirect landing page
If you want to take things one step further, you can follow the steps above to pass a UTM parameter from your landing page to a videoask embedded on that page, then pass the same UTM parameter to a site you redirect respondents to from your videoask.
Note: This guide is for advanced users. A paid VideoAsk plan is required for this setup.
If you're not familiar with how to redirect respondents to a landing page from your videoask, check out how to use our redirect to a webpage feature here.
First things first, complete the steps above to make sure your UTM parameter pulls through to your VideoAsk account from your landing page. Then, continue with these steps:
1. From your VideoAsk account, click on the videoask you've set up the redirect on.
2. Go to your videoask builder and click the videoask step where you have set up the redirect.
💡 Tip: If you're not sure how to do this, check out this handy guide on redirecting respondents to a webpage.
3. Click the Logic tab.
4. Go to the option where you've set up the redirect, and add the following parameter to the end of the URL:
?utm_source=
Then type an @ symbol and choose utm_source from the custom variable list that appears:
And that's it! Now, your UTM parameter will be passed from your videoask to your redirect landing page. 🎉