T.V
- 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 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. Therefore, there can be many different URLs for the same campaign.
But what if you want to know how many people visited each page 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.
Example:
By default, a Qualifio iframe has an URL that looks like this:
For another participation in the same campaign, it might look like this:
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://demo.qualifioapp.com/123456/en/1/intro/1
How to add a custom path to Qualifio campaigns? (with Google Tag Manager)
- Step 1: Go to Qualifio > Settings > Tag Library > Tags.
- Step 2: Create or edit a tag with your Google Tag Manager snippet.
- Step 3: Add the page path below before your GTM code.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'pagePath': qlfDataLayer[0]['page_path'] + '?{utms}'
});
</script> - 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: In your Google Analytics Settings variable, click More Settings > Fields to Set and add a new field.
- Step 9: Set "page" as Field Name.
- Step 10: For Value, click + and select the variable you just created in Step 5.
- Step 11: Save.
- Step 12: Go to Tags now and click New.
- Step 13: In the Tag Configuration screen, select Google Analytics – Universal Analytics.
- Step 14: Leave the track type to Pageview.
- Step 15: Select your Google Analytics Settings variable.
- Step 16: Set the triggering to All Pages (Page View).
- Step 17: Edit your Tag name (e.g. "Qualifio Virtual Page Path") and hit Save.
- Step 18: Submit changes to your GTM Workspace.
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 Tag Manager?
You will have to add the page path below before your GTM code.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'pagePath': qlfDataLayer[0]['title'] + qlfDataLayer[0]['step'] + qlfDataLayer[0]['pg'] + '?{utms}'
});
</script>
Then follow the aforementioned steps 5 to 18 to make the necessary changes to your GTM Workspace.