Jump to: navigation, search

Google Tag Manager

Google Tag Manager Integration

Google Analytics can provide a lot of the important insights you’re looking for, but when used alone, it does have its limitations.

You can use tags for all sorts of purposes, including scroll tracking, monitoring form submissions, conducting surveys, generating heat maps, remarketing, or tracking how people arrive at your site.

Read below a systematic guide to integrate Google Tag Manager with your OnPrintShop website.

Step – 1 Registration with Google Tag Manager to create account

Go to, https://marketingplatform.google.com/about/tag-manager/ and Sign in to Tag Manager.

Google Tag Manager1.png

Next, is to create an account. Click on Create Account button.

Google Tag Manager2.png

To complete the account setup enter your account name and select country. Next, for container setup enter your website name and choose the target platform as Web.

Google Tag Manager3.png

Step – 2 Add the Google Tag Manager code

After creating the account the Google Tag Manager pop up will appear.

Google Tag Manager4.png

Copy the <head> tag code and paste it in the below path in Admin Panel – Admin >> Store Configuration >> External Service Settings >> Digital Marketing tab >> Google Tag Manager

Google Tag Manager5.png

Copy the <body> tag code and paste it in the below location of Admin Panel – Admin >> Store Personalization >> Language Text References >> search ‘noscript message’

Google Tag Manager6.png

Step – 3 Check the Google Tag Manager Plugin

The above configuration will enable the Google Tag Manager Plugin on Google Chrome.

If not downloaded then download the plugin from - https://chrome.google.com/webstore/category/extensions?hl=en

Open your website and enable the Google Tag Manager Plugin.

Now, navigate to any product page of your website and you’ll see that the Google Tag Manager is enabled for your website.

Google Tag Manager7.png

Step –4 Create a variable in Google Tag Manager

Next, is to create a variable in Google Tag Manager. For this go to its dashboard and click on Variables.

Google Tag Manager8.png

Next, click on the NEW button to add a variable.

Enter the variable name as – Google Analytics Tracking ID

Click on the pencil-like icon and choose the variable type as – Google Analytics Settings. This variable will allows configuring Google Analytics settings across multiple Google Analytics tags.

Google Tag Manager9.png

Next, enter the Google Analytics Tracking ID. To get the ID to follow check out the steps given at - Google Analytics settings variable

You can also follow these steps –

  • Sign in to your Analytics account.
  • Click Admin.
  • Select an account from the menu in the ACCOUNT column.
  • Select a property from the menu in the PROPERTY column.
  • Under PROPERTY, click Tracking Info > Tracking Code. Your ID is displayed at the top of the page.

After these let the Cookie Domain be auto.

After these configurations, your screen should look something like below –

Google Tag Manager10.png

Step – 5 Create Tags in Google Tag Manager

Now, one needs to create 5 tags in the Google Tag Manager.

Under your workspace click on Tags.

Google Tag Manager11.png

Click on New to add a tag.

  • Enter the tag title – Add to cart.
  • Under Tag Configuration choose tag type as – Google Analytics: Universal Analytics
  • Track Type as – Event
  • Enter Category as – Enhanced Ecommerce
  • Under Action write – addToCart
  • Keep Non-Interaction Hit as – True
  • For Google, Analytics Settings choose the variable created in the previous step i.e. Google Analytics Tracking ID
  • Tick the Enable overriding settings in this tag checkbox
  • Now under More Setting scroll down to Ecommerce and set Enable Enhanced Ecommerce Features as True.
  • Tick the Use Data Layer checkbox.

Now click on Save. This will open a pop-up stating No Trigger Selected which means this tag does not have a firing trigger. Unless a trigger is added, this tag will not fire. Click on Add Trigger.

Google Tag Manager12.png

Click on the ‘+’ icon to add a trigger.

  • Enter trigger name as – Add to Cart
  • Choose trigger type as – Custom Event
  • Write event name as – addToCart
  • Under ‘This trigger fires on’ select – All Custom Events
  • Click on Save.

Your Trigger Screen should look like below –

Google Tag Manager13.png

After adding the Trigger your Tag screen will look like below –

Google Tag Manager14.png

Similarly, you can create other tags and triggers with the same setting. All you have to do is change the names.

Tag Title Action (Tag) Trigger Names Event Name (Trigger)
Checkout purchase checkout checkout-complete
Product Impression productImpression productImpression productImpression
Product detail productdetail productdetail productdetail
Remove from Cart removeFromCart removeFromCart removeFromCart

Step – 6 Save the changes made

Now go to Workspace >> Overview

Click on Preview and then on Save.

Google Tag Manager15.png