Skip to content
September 17, 2015 / kiranpatils

Integrate Google Tag Manager with Sitecore

Challenge:

Let’s say If you have launched website, and you would like to provide some way using which your marketing team should be able to add any Tags e.g. Google Analytics, Advertising conversion tags, general java script etc.

Now, you may say, Yes, it’s pretty using Sitecore, We can have one rendering in main layout and provide some configurations to an end-user. Using which they can add/update any JavaScript. Add it on page etc. That’s good!

Now, let me add few twists to it! [“Life is not as easy as it seems to be. It is full of twists and turns. And that’s what keeps us alive!” :-)]:

  1. Marketing folks doesn’t have Sitecore access
  2. They should be able to add any tag, and they should be able to decide. On which page/section/full site. Configured tag applies
  3. It should load all tags using async JS
  4. Other Non Sitecore tags should also be able to use those tags

Now, It sounds tough in Sitecore – Correct? Again, Achievable. But it will need a lot of development efforts, configuration, training and Most Importantly testing!

What if you have good solution available from your known provider? – Google — Yes, Google Provides service named as Google Tag Manager http://www.google.co.in/tagmanager/ “Google Tag Manager is a free container tag system that allows to manage different kinds of tags on the site. This include web analytics tags, advertising conversion tags, general JavaScript, etc.” : Source : http://www.cmswire.com/d/google-tag-manager-p001192

This video Explains Google Tag Manager nicely :

Sounds great! Now, we thought to include this feature in our Sitecore solution. Again, what we applied is one way to do it. You might do it better way. But most Important thing is the basic integration

Solution:

  • Signup for Google Tag Manager : http://www.google.co.in/tagmanager/
  • Configure Account and Container. It should give you one GTM ID
  • Get a Script from there and you should be able to integrate within your site using : https://developers.google.com/tag-manager/quickstart
  • Sitecore : This is how we implemented in Sitecore:
    • Added one field on Siteroot named as : Google Tag Manager ID : Which is single line text. And you can provide GTM ID. Which you got in Step#2
    • Rendering:
      • In Main layout added GTM Sublayout after body tag:
      • Google Tag Manager.ascx contains following code:

<% if (!string.IsNullOrWhiteSpace(GTMContainerID))
{ %>
<noscript>
<iframe src='<%= "//www.googletagmanager.com/ns.html?id="+GTMContainerID %>'
height="0" width="0" style="display: none; visibility: hidden"></iframe>
</noscript>
<script>
var GTMCID = '<%= GTMContainerID %>';
(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', GTMCID);
<%} %>

  • Code Behind [GoogleTagManager.ascx.cs ] contains code like this :
public string GTMContainerID = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
    // Set GTM Container ID
    GTMContainerID = ContentHelper.GetGTMContainerID(Sitecore.Context.Item);
}

 

That’s it!

How to validate it?

  1. Google Tag Assistant : https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk
  2. In Google Tag Manager, to activate preview mode for testing content without publishing it :
    1. Go to the main Google Tag Manager page: https://www.google.com/tagmanager/web
    2. Click on the Account
    3. Click on the appropriate container
    4. On the Container Draft>Overview page, click the “Preview” button.
    5. Click the “Share” option to generate a link for testing.
    6. Choose the domain for your link, and optionally choose whether to enable the debugging mode.
    7. Copy the link from the bottom of the window, and use that to get to the site. It will set a cookie which you can use for testing.
    8. When you click the preview link above, it shows you a page with a button to “exit preview mode” and another link to get to the website. To test, you need to click the link website from here, not the button to exit.

Happy Google Tag Managering! 🙂

Advertisements

3 Comments

Leave a Comment
  1. Alexandr / Jul 10 2016 2:50 am

    Thank you for the post!

    I have question – if I need to use tag manager only on few pages of website do I need to implement logic that picks those pages or marketers can handle this from their google account?

    • kiranpatils / Aug 22 2016 5:17 am

      Marketers can handle from GTM Dashboard

  2. Dylan Arroyo / Apr 28 2017 8:02 pm

    Hello And Thanks!

    How Can I force the GTM loading into HtmlHead and not in the body?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: