Tracking events in .Stat Data Explorer & Viewer with GoogleTagManager (GTM)
The objective is to integrate GoogleTagManager (GTM), in addition to Google Analytics,
For tracking advanced usages and users' behaviours on the Data Explorer/Data Viewer.
Events & Actions to track
All parameters added and embedded to the URL of the site, from the homepage to the search page result, visualisation page and embedded views, must be retrieved and used for tracking event, for example:
-
Page language(not asked as event) -
Search terms -
Filter by facets -
Dataflow code
The following variables should be created in order to retrieve/track the corresponding information:
-
siteName -
Site environment (e.g. live, staging, dev) -
pageLanguage (e.g. en, fr) -
pageTopic (e.g. when users browse by a Topic) -
pageCategory (statistics) tbd : Can we at least have "statistics" on all pages? That would be useful for cross-cutting content analyzes at all OECD sites. -
DataSetCode (dataflow identification)
In addition, we need to create the Events for the following user actions to track:
-
downloadRelatedFile for additional downloads of External Resources (see specs). It is required to track it from both search results and visualisation pages. -
connection for tracking the Data Explorer access by authenticated or anonymous users. -
internalSearchTerm for retrieving keywords of search --> tbd : is it necessary or can it be replaced by simply tracking URL search terms? -
filterByTopic for browse by actions --> tbd : is it necessary or can it be replaced by simply tracking URL facets selections? -
outboundLink for links that redirect to external sites (e.g. external to OECD sites). -
CrossSiteLinks for links from the Data Explorer that redirects to another OECD website.
All GTM Variables and Events names should be configurable, so that any organisation can modify the names of a Variable or an Event for tracking the same information.
Technical specifications
GTM Tracking code
Tracking implementation guidelines
Copy the code below and paste it onto every page of your website. Paste this code as high in the
<!-- 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-ID#');</script>
<!-- End Google Tag Manager -->
Additionally, past this code immediately after the opening <body>
tag:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=#gtm-ID#"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
For more information about installing the Google Tag Manager snippet, visit the Quick Start Guide.
Data Layer
The dataLayer is a javascript object declared in the main tag of GTM, which contains on each page the data necessary for the proper functioning of all tags managed by the tool. Information such as events and variables can be transmitted to Google Tag Manager via dataLayer.
The following code must be placed on all pages of the site, in the <head>
tag, after the elements necessary for the proper functioning of the site (CSS, JS functions, etc.) but just before the main tag GTM.
The values must be dynamic according to page type and user characteristics. If a value is not available because the user is not connected or there is simply no value to be filled, assign an empty value to the parameter.
<script>
dataLayer = [{
'siteName':"#siteName#",
'siteEnvironment':"#siteEnvironment#",
'pageLanguage':"#pageLanguage#",
'pageTopic':"#pageTopic#",
'pageCategory':"#pageCategory#",
'dataSetCode':"#dataflowCode#",
'currentPagePath':"#currentPagePath#"
}];
</script>
Assigning values to parameters
The code above contains elements indicating dynamic variables, which should not be copied directly as such to your site. The values of each variable must be entered instead of the 'INSERT VALUE' fields, for each case described.
Note that regardless of the type of dynamic variable processed, all variables should be included between ' ', as indicated in the code portions above.
Here is a list of rules to follow when filling in the required variables:
- If a variable information is missing, put an empty string instead * HTML codes are not allowed (example **" ").
- Values in the dataLayer are case sensitive * Apostrophes (') and quotation marks (") are also to be prohibited or must be escaped (e. g.: {' or \ ").
Tracking ID
A tracking ID (marked in above snippets with the placeholder '#gtm-ID#') must be configurable per DE/Viewer tenant. The OECD-specific pre-prod and prod instances should use "GTM-P5JSM4P".
For tests purposes, each QA and Staging Devops instance also needs a Tracking ID.
Technical requirements to clarify/validate: reuse the current Google Analytics tracking IDs used in our Devops environments.
Same as when setting up Googler Analytics, defining a Tracking ID for GTM is part of the release process: add the env
variable in your .env file and start your data-explorer service (example here).
Technical assumption to challenge with the current implementation
GoogleTagManager (GTM) would probably be used on top / in addition with GoogleAnalytics (GA). Note that the current implementation with Google Analytics includes Event Categories and Event Actions listed here.