liferay Configure Google Tag manager(GTM) in liferay Using GTM to configure GA events
Example
GTM simplifies the whole process of managing tags.In GTM terminology
- We put a GTM javascript snippet on the concerned page,in portal_normal.vm in custom theme in liferay, containing the GTM id and a data layer structure(if needed) to map values from page to variables
- Corresponding to data layer variables,we need to create Variables at GTM end,which retrieve data from data layer
- Subsequently,we create tags,which are basically fields which maps variables from data layer to events,which are triggered on certain conditions,leading to events being sent to respective tracking tool(GA,in our case).
Below is a sample of GTM javascript snippet embedded on a page,
<body>
<!-- 1) Data layer section -->
<script type="text/javascript">
dataLayer = [{
"page" : "<? Virtual path of the page ?>"
,"pageType" : "<? Page type ?>"
,"user" : {
"type" : "<? User type ?>"
,"userId" : "<? Logged user id ?>"
,"country" : "<? Logged user country ?>"
,"userRole" : "<? Role of user ?>"
}
}];
</script>
<!-- 2) GTM Container -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PK9HK8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<GTM-ID>');</script>
<!-- End Google Tag Manager -->
Post including this script in page,we need to configure the respective variables and tags from GTM end.
Post we have configured the required fields,we can view events on GA console upon a user view.
In order to view the data sent from portal to GA,we can use Google Analytics Debugger plugin,to view events being sent to GA via browser console.
