Better tracking with custom page paths (URLs)

Tabata Vossen -

We've received a lot of feedback saying it would be useful to be able to give a campaign a customised path (URL). The custom page path allows you to give your campaigns a short and effective URL to be sent to Google Analytics. This guide explains how to implement custom page paths with Google Analytics and Tag Manager.

In some cases, the URL you want to send to Google Analytics is different from the URL that appears in the address bar of the user's browser –or, in this case, from your campaign's iframe URL. Indeed, the URL of a Qualifio iframe is dynamically updated with each new participation as it contains a unique ID that might store personal information participants enter in the campaign so there can be many different URLs for the same campaign.

What if you want to know how many people visit each of the pages of your campaign? To solve this problem, the Analytics hack consists of "unifying" your reporting by specifying a custom page path that will be sent to Google Analytics.

 

Examples:

By default, a Qualifio iframe has an URL that looks like this:

https://player.qualifio.com/20/B7D3583E-E891-26AF-6C51-D63C499EF96A/s17/v1.cfm?id=B7D3583E-E891-26AF-6C51-D63C499EF96A&pdomain=http://www.mywebsite.com&_gameuuid=B7D3583E-E891-26AF-6C51-D63C499EF96A&_pv=/20/

In another participation to the same campaign, it might look like this:

https://player.qualifio.com/20/B7D3583E-E891-26AF-6C51-D63C499EF96A/s17/v1.cfm?id=B7D3583E-E891-26AF-6C51-D63C499EF96A&pdomain=http://www.mywebsite.com&_gameuuid=C8E4694F-F902-37BG-7D62-E74D500FG07B&_pv=/20/

Customising this URL allows you to set the path to something much shorter and straight to the point that will be the same for all users who visit the same page of the iframe, such as:

https://player.qualifio.com/123456/en/1/intro/1

How to add a custom path to Qualifio campaigns?

How to set this up with Google Analytics

  • Step 1: Go to Qualifio > your campaign > Channels > Tags.
  • Step 2: Put your Analytics tracking code in the "Google Analytics Tag" tab.
  • Step 3: Specify the page path as shown in orange in the script below.

<!-- Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=
UA-XXXXXXXXX-1"></script><script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXXXX-1', {
   'page_path': qlfDataLayer[0]['page_path'] + '?{utms}'
 });  
</script>
<!-- End Google Analytics -->

or

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
ga('set', 'title', qlfDataLayer[0]['title']);
ga('send', 'pageview', qlfDataLayer[0]['page_path'] + '?{utms}');
</script>
<!-- End Google Analytics -->

  • Step 4: Save step and analyse your new insights in Google Analytics!

Note: The code shown above doesn't contain any Tracking ID (UA-XXXXXXXXX-1). Of course, you have to use your own Google Analytics tracking code :-) where do I find this code?

How to set this up with Google Tag Manager

  • Step 1: Go to Qualifio > your campaign > Channels > Tags.
  • Step 2: Put your Google Tag Manager snippet in the "Google Analytics Tag" tab.
  • Step 3: Add the page path before your GTM code as shown in bold below.

    <script>
    dataLayer = [{
    'pagePath': qlfDataLayer[0]['page_path'] + '?{utms}'
    }];
    </script>

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->

    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    Note: The code shown above doesn't contain any Tracking ID (GTM-XXXXXXXXX). Of course, you have to use your own Google Tag Manager snippet :-) where do I find my snippet?

  • Step 4: Log in to your GTM Workspace.
  • Step 5: Go to Variables and create a new User-Defined Variable.
  • Step 6: Choose the Data Layer Variable type.
  • Step 7: Give "pagePath" as Data Layer Variable Name, give the name of your choice to the variable (e.g. "Page Path from Data Layer") and hit Save.
  • Step 8: Go back to Variables and create another new variable.
  • Step 9: Select Google Analytics Settings as variable type (note: if you already have such a variable, just go directly to step 12).
  • Step 10: In the Variable Configuration screen, enter your Google Analytics Tracking ID.
  • Step 11: Leave Cookie Domain on auto.
  • Step 12: Click More SettingsFields to Set and add a new field.
  • Step 13: Set "page" as Field Name.
  • Step 14: For Value, click + and select the variable you just created at Step 5.
  • Step 15: Save.
  • Step 16: Go to Tags now and click New.
  • Step 17: In the Tag Configuration screen, select Google Analytics – Universal Analytics.
  • Step 18: Leave the track type to Pageview.
  • Step 19: Select your Google Analytics Settings variable.
  • Step 20: Set the triggering to All Pages (Page View).
  • Step 21: Edit your Tag name (e.g. "Qualifio Virtual Page Path") and hit Save.
  • Step 22: Submit changes to your GTM Workspace and analyse your new insights in Google Analytics!

Building your own custom path

Our standard page path is: /campaign_id/lg/pg/step/pgi, which in real life would result in something like this: /123456/en/1/intro/1 if a participant visits the welcome screen of a campaign in English whose unique identifier is 123456.

You can also build your own custom page path based on the information and structure you would need. The following table summarises the components of the Qualifio data layer which can be used:

Name Type Description
title Text The title of your campaign
campaign_id 6 digits The unique identifier of your campaign
campaign_guid 36 characters divided by 4 hyphens The globally unique identifier of your campaign
channel_guid 36 characters divided by 4 hyphens The globally unique identifier of your publication channel
device Text The device used by the participant
lg Text The language of your campaign
pg Digits The page in the global flow of your campaign (e.g. welcome screen = 1, first question = 2, second question = 3, etc.)
step Text The name of the campaign step the participant visits (e.g. intro, questionset, identityset, exit, alreadyplayed)
pgi Digits The page in the step flow of your campaign (e.g. first question = 1, second question = 2, etc.)
page_path   The page path (replacing all of the above)

 

How to set this up with Google Analytics?

You first have to modify the content of the page path according to your needs. For the sake of example, let's say your ideal page path is title/step/pg.

You will have to specify that page path in your Google Analytics tag as shown in orange in the script below:

<!-- Google Analytics -->
<script async src="//www.googletagmanager.com/gtag/js?id=
UA-XXXXXXXXX-1"></script><script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXXXX-1', {
   'page_path': qlfDataLayer[0]['title'] + 'page_path': qlfDataLayer[0]['step'] + 'page_path': qlfDataLayer[0]['pg'] + '?{utms}'
 });  
</script>
<!-- End Google Analytics -->

or

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
ga('set', 'title', qlfDataLayer[0]['title']);
ga('send', 'pageview', qlfDataLayer[0]['title'] + qlfDataLayer[0]['step'] + qlfDataLayer[0]['pg'] + '?{utms}');
</script>
<!-- End Google Analytics -->

 

How to set this up with Google Tag Manager?

You will have to add the page path before your GTM code as shown in bold below.

<script>
dataLayer = [{
'pagePath': qlfDataLayer[0]['title'] + qlfDataLayer[0]['step'] + qlfDataLayer[0]['pg'] + '?{utms}'
}];
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Then follow aforementioned steps 4 to 22 to make the necessary changes to your GTM Workspace.