5 September 2018

How to add Google Tag Manager to Blogger (Blogspot) Blog

Google Tag Manager helps you, as you have already guessed it, to manage marketing tags in your websites and mobile apps.

But installing Google Tag Manager in Blogger Blog is a little tricky as it is not exactly same as installing it in WordPress or any other website, you have to make a very small change in the GTM Container Snippet then only it will work.

So if you already know how to Install GTM in WordPress and in other places, you facing problem only with Blogger, then do this -

In the GTM Container Snippet (in <head> Script) find dl=l!='dataLayer'?'&l='+l:'';, change the ampersand (&) to its HTML encoded version (&amp;)

So, the string
dl=l!='dataLayer'?'&l='+l:'';
will look like this
dl=l!='dataLayer'?'&amp;l='+l:'';

Save the changes and you are done.

If you are completely new to Google Tag Manager, read it entirely. Though you can skip and jump to any section using these navigation links below -

Introduction Google Tag Manager
Why use Google Tag Manager
Add Google Tag Manager to Blogger Blog (Step by Step) - follow these steps to do it smoothly, avoid making any mistake
Video Tutorial - you can skip to it if you do not like to read
Google Tag Manager Installation tips - there are several things you can do wrong

Introduction Google Tag Manager:

What happens is there are hundred of Marketing Tags serving different purposes available in the market and it is very likely that you will use some. Google Analytics Tag, Google AdWords Remarking tag, Facebook Pixel are most popular among those.

These Tags are basically JavaScripts, and you have to insert each Tag in the backend or HTML of your website.

So instead of adding a JavaScript to the backend of your website each time you decide to use a new marketing tool, you insert one container JavaScript in your website and later add, remove or modify any tag through one centralize Tag Manager without touching the Backend again. Google Tag Manager allows you to do this.

Why use Google Tag Manager?

Some scenarios where you want to use Google Tag Manager -

If you are working for a company it is very likely that you will not have access to the Backend of your website and you have to ask the developers for adding any extra tag for you. They are busy people they can not do it immediately every time. So it is better to install GTM Container Tag once and in future, you can add any tag through GTM all by yourself.

In Blogger though you have all control over the backend and you are not dependent on others, still, you want to use Google Tag Manager because of the following reasons

  • It reduces the complexity of managing multiple marketing tags and saves time
  • It helps you avoid mistakes that might occur each time you add JavaScript to the HTML of your website
  • Your website's backend stays clean as you have less number of Java Scripts added

So, let's see how exactly to do it -

How to add Google Tag Manager Container Snippet on Blogger Blog (Step by Step)

Step 1: Generate GTM Container Snippet for your website

  1. Navigate to Google Tag Manager, Sign in if you already have an account or to create a new account by clicking on Start for free
  2. Create a New Account or select an existing one and create a Container. type the URL without http:// and / at the end. So the URL should look like this -
    yourdoamin.com, not http://yourdoamin.com or https://www.yourdoamin.com/
  3. Two Container snippets will pop up. If you missed the pop-up, click on ADMIN > Install Google Tag Manager and you see two GTM Container Snippets are ready to insert in the backend of your Blogger Blog.

Step 2: Insert the GTM Container Snippets to your Bloggers Theme

  1. Navigate to Blogger.com, choose the Blog you want to install the GTM Tag on, from the blogs list
  2. click on Theme > Edit HTML
  3. Copy the script part (first snippet) from GTM dashboard and Paste right below the <head> as shown in the image below
  4. Copy the non-script part (second snippet) from GTM dashboard and paste it right below the <body>
    To find the body, click anywhere in the theme edit window, press Ctrl + F, type <body (don't type <body>), hit Enter. Right after the <body> Paste the Code Snippet
  5. Click Save changes. 
Till this part, the procedure of Installing GTM is same everywhere.

But for Blogger, there's a catch.

Step 3: Change the ampersand (&) to its HTML encoded version (&amp;)

  1. In the first code snippet find the string dl=l!='dataLayer'?'&l='+l:''; and replace it with dl=l!='dataLayer'?'&amp;l='+l:'';
    So, the only change is instead of ampersand (&) you have to place its HTML Encoded version, which is &amp; everything else is fine.
  2. Now hit Save theme and you should be done.

Step 4: Test whether it is working fine

To test whether everything is working fine, you can install Google Tag Assistant Chrome extension. Click on the Extention on the top bar, click on Enable, reload the Page. Now you should see Google Tag Manager in the Google Tag Assistance like this

If you still find difficulty watch this video tutorial

Video Tutorial

Coming soon


No comments:

Post a Comment

Popular Posts