[ GTM ] google TagManager

0. Installation

1. Create Google tagManager account + container
Go to https://tagmanager.google.com

Typically, you set up one container per web domain. However, if the user experience and tags on a website span more than one domain, it’s best to set up a single container that serves all the domains involved. Here are a few considerations.

1.1 Configuration (rules, triggers, and variables) can’t easily be shared across containers without using container exporting and importing, or by using the API. If the tags and firing logic is similar across domains, it makes sense to use a single container, because maintaining multiple similar configurations is time-consuming and error-prone.

1.2 When someone publishes a container, all changes go live, regardless of domain. If you need to apply changes to one domain without affecting other domains, use a different container for each domain.

2. Copy container code to website

NOTE : Replacing `GTM-XXXX` with your container ID.

Website

<head>
...
<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->
...
</head>
<body>
...
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
...
</body>

ref : https://support.google.com/tagmanager

AMP page

Place the <script> portion of the JavaScript snippet just above the closing </head> tag.

<amp-analytic> section immediately after the opening <body>

 

If all of your tags fire as pages are loading, and these pages can be identified by their URLs, a basic container implementation may be sufficient for your needs.

  • If your tag firing scenarios are more complex, you may want to implement a more customized container implementation. These custom solutions often implement a data layer, which is code that helps Google Tag Manager pass data from your site or app to your tags. You can learn about why and how you would use a data layer in our solutions guide, and how to set up a data layer on our developer site.

Trobleshooting Container

Preview Mode : https://support.google.com/tagmanager/answer/6107056

Tag Assistant Chrome Extension : https://support.google.com/tagassistant#topic=6000196

 

1. Create a tag

1. Begin by identifying all of the tags you have deployed on your site and where they are deployed (e.g. in global headers or footers, on landing pages, confirmation pages, in response to button clicks, etc.)

2. Create new tag

  • Trigger ( of new tag ) that we are going to add tag : i.e. when the page is loaded
  • Variable : String, HTML Node element, cookies, random number, custom javascript code
  • dataLayer : If the data you want to collect is not visible on the page, refer to the developer documentation for information on how to pass additional data to tags.

(for example, you can tell GTM to fire a remarketing tag when the purchase_total > $100)

Rather than referencing variables, transaction information, page categories, and other important signals scattered throughout your page, Google Tag Manager is designed to easily reference information that you include in this data layer.

&amp;amp;lt;script&amp;amp;gt;
 // dataLayer
 // Example : put the dataLayer when the page is view
 // then fire the google analytic event tag when detected to track data
 dataLayer = [{'destination': 'Hawaii',
 'travelType': 'vacation'
 }];
&amp;amp;lt;/script&amp;amp;gt;

ref : https://developers.google.com/tag-manager/devguide#datalayer

3. Publish

 

Troubleshoot : https://developers.google.com/tag-manager/troubleshooting

 

Advertisements

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