--

Blogs

Home » Blog » Google Tag Manager - Creating Account and Google Analytics and Yandex Metrika Implementationpost thumb

1 nov 2017

Google Tag Manager - Creating and Analytics / Metrika Publishing

By: Roman Kondrashov

Google Tag Manager is a handy tool to add and update various pieces of code to a website without making any changes directly to the site code. So or with the insertion of minimal changes, which are unlikely to require edits in the future. This post describes the creation of a Tag Manager account (hereinafter GTM) with the placement of its code on the site and the publishing of Google Analytics (GA) and Yandex-Metrika (YM) counters. The post is actual at the end of 2017 (there are the screenshots of the modern Tag Manager interface).

1. Create an account and add a GTM counter Container to the site code

Go to https://tagmanager.google.com/ and create a new account (if you do not already have one). In the 1st field add the name of the account and in the 2nd field (Setup Container) should be the name of the container (actually, the counter) in the form of the URL of our site. Also click on the "Web" (Where to Use Container).

gtm_init-uno

Click the Create button, and on the next screen agree with the Google Tag Manager Terms of Service Agreement.

Got 2 fragments of code. The first one needs to be inserted into the head of your site (the higher, the better),and the second one - directly after the body tag.

gtm_code

Done? Ok. Google Tag Manager interface is in front of you:

gtm_interfaceoverall_e
  • Container is a piece of JS code that is placed on all pages of the site. Inside the container there is information about tags that are triggered by the execution of certain rules specified in triggers and variables;
  • Tag is a snippet of site code that allows you to track traffic and analyze user behavior, conversion, etc. (for example, the Yandex Metrika code);
  • Triggers determine when to activate the tag in a web container;
  • Variables are a "name-value" pair, which is used in the trigger as a condition under which the tag will fire.

It will be more clear further :).

2. Install Google Analytics via Google Tag Manager

Add the Google Analytics Tag:

gtm_addtag

Name it 'GA Base Tag' and select the type Universal Analytics in the Tag Configuration section:

gtm_gabasetaginit

Next, click on the Select Setting Variable in the Google Analytics Settings item and select New Variable in the drop-down list:

gtm_gabasetag

We see the Untitled Variable, let's name it gaProperty. The properties can hide from you. Then click Variable Configuration to return them. Enter the Universal Analytics code:

gtm_gaproperty

The code can be found in the ADMIN / Property Settings section in the GA interface or directly in the site code if it is already installed on the site (looks like UA-12345678-1). Click Save:

gtm_gaconf

Now go to the Triggering subsection.

For the tag to work on all pages, specify the "All Pages" trigger

gtm_allpagestrigger

Click on SAVE. Then it would be necessary to click SUBMIT. But before publishing first let's enter Preview Mode to verify the changes made.

2.1. Debug Pane in Google Tag Manager

Press PREVIEW to check the changes.

Then, in that browser (checked in Google Chrome and Firefox),where you logged into GTM, go to your site (or refresh the page if it's already open) and scroll down the page. The Debug Pane should be displayed below. If the Container appears below the "Tags Not Fired On This Page" line, the tag on the page did not work. It is necessary to check all settings and correct any errors. If the Container appears under the "Tags Fired On This Page" line, then Universal Analytics is installed without any errors.

gtm_chromeext_e

Now in GTM we press SUBMIT and name somehow the current version of the changes. After that, you can press PUBLISH:

gtm_gapublish

Thus, we implemented Google Analytics through GTM without interfering with the source code of the pages. You can exit Preview Mode.

3. Implement Yandex Metrika via Google Tag Manager

Follow the same steps as for Google Analytics to set up Yandex Metrika.

Create a new tag. However, in its configuration you will not see Yandex Metrika (since it's simply not in the tag type list by default),so specify 'Custom HTML'.

gtm_metrikainit

You need to insert the code of your Metrika's counter into this HTML form:

gtm_ymcode_e

Copy the counter code from the source code of the page, if YM is already installed on the site.

Note. As in the case of Google Analytics, you do not need to place the Metrika code in the site code. The resulting YM code, when configured, must be copied and added to the "Custom HTML" window that appeared in the previous step. Trigger has been created earlier - it's the 'All pages'.

Now we check the functionality in the "Preview" mode again or immediately Publish it.

Thus, we published Yandex Metrika on the site without interfering with the source code of the pages.

P.S. Do not forget to remove the GA and YM code from the site code if it was there before.

It can be useful:

We build websites

Our service