Инструкция: настройка счетчика Яндекс.Метрики через Google Tag Manager

Мы часто сталкиваемся с тем, что рекламодатели для создания детальной статистики посетителей сайтов используют параллельно две системы веб-аналитики Google Analytics и Яндекс.Метрику. И для настройки отслеживания, как правило, используют Google Tag Manager. Мы подготовили подробную инструкцию, как настроить передачу идентификатора клиента Google Analytics в Яндекс.Метрику.

Шаг 1. Инициализация счетчика

Создайте переменную с типом «Константа» и значением идентификатора вашего счетчика. После все коды будут представлены с учетом того, что переменная называется `YM -- Tracker`.

Для корректной инициализации счетчика используйте следующий код:

	<script type="text/javascript">
	(function (d, w, c) {
	(w[c] = w[c] \|\| []).push(function() {
	try {
	w['yaCounter' + {{YM -- Tracker}}] = new Ya.Metrika({
	id: Number({{YM -- Tracker}}),
	clickmap: true,
	trackLinks: true,
	accurateTrackBounce: true,
	triggerEvent: true,
	webvisor: true,
	ecommerce: "dataLayer"
	});
	w.goalSender = function(t,p,b){
	p = typeof p !== 'undefined' ? p : undefined;
	b = typeof b !== 'undefined' ? b : undefined;
	if (typeof w['yaCounter' + {{YM -- Tracker}}] == 'object') {
	if (typeof p == 'object' \|\| typeof p == 'function'){
	if (typeof b == 'function' \|\| typeof b == 'object'){
	w['yaCounter' + {{YM -- Tracker}}].reachGoal(t,p,b);
	} else{
	w['yaCounter' + {{YM -- Tracker}}].reachGoal(t,p);
	}
	} else {
	if (typeof b == 'function' \|\| typeof b == 'object') {
	w['yaCounter' + {{YM -- Tracker}}].reachGoal(t,b);
	} else {
	w['yaCounter' + {{YM -- Tracker}}].reachGoal(t);
	}
	}
	} else {
	w.setTimeout(function(){w.goalSender(t,p,b);}, 300);
	};
	};
	w['document'].addEventListener('yacounter' + {{YM -- Tracker}} + 'inited', function (){
	dataLayer = w.dataLayer \|\| [];
	dataLayer.push({
	'event': 'YMReady',
	'isYMReady': 'true',
	'ymclid': w['yaCounter' + {{YM -- Tracker}}].getClientID()
	});
	});
	} catch(e) {
	dataLayer = w.dataLayer \|\| [];
	dataLayer.push({
	'event': 'YMFail',
	'isYMReady': 'false',
	'failReason': String(e)
	});
	}
	});

	var n = d.getElementsByTagName("script")[0],
	s = d.createElement("script"),
	f = function () { n.parentNode.insertBefore(s, n); };
	s.type = "text/javascript";
	s.async = true;
	s.src = "https://mc.yandex.ru/metrika/watch.js";

	if (w.opera == "[object Opera]") {
	d.addEventListener("DOMContentLoaded", f, false);
	} else { f(); }
	})(document, window, "yandex_metrika_callbacks");
	</script>
	<noscript><div><img src="https://mc.yandex.ru/watch/{{YM -- Tracker}}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

view raw file1.html hosted with ❤ by GitHub

Этот код отличается от стандартного. В нем мы заменили явный номер счетчика на обращение к соответствующей переменной. При инициализации счетчика включили событие о готовности счетчика: при корректной инициализации в dataLayer отправится событие `YMReady`, при совершении ошибки - `YMFail`. Далее для фиксации этих событий соответствующие настройки нужно произвести и в контейнере. Также в этом коде мы использовали глобальную функцию `goalSender`. Это значит, что в отличие от стандартного метода счетчика reachGoal, при вызове функции будет происходить проверка инициализации счетчика. Если счетчик загружен, то в Яндекс.Метрику отправляется событие достижения цели, если нет, то повторяется каждые 0,3 с.

Код не универсальный, и при необходимости добавьте другие параметры инициализации из документации (https://yandex.ru/support/metrika/code/counter-initialize.html).

Далее установите код в контейнер через тег с типом «Пользовательский HTML» со стандартным правилом активации на всех страницах.

Шаг 2. Проверка готовности счетчика

Итак, мы настроили следующие события:

`YMReady` – счетчик загружен, и его можно использовать;
`YMFail` – во время инициализации счетчика произошла ошибка.

Добавьте эти события в GTM при помощи триггеров с типом **Пользовательское событие**. Пример такого триггера:

При необходимости можно создать несколько переменных на основе данных, которые передаются в уровень данных сайта при инициализации счетчика:

`isYMReady` – переменная-индикатор успешной инициализации счетчика. В случае успешной инициализации содержит значение `true`, при наличии ошибки - `false`;
`ymclid` – идентификатор клиента Яндекс.Метрики. Содержит значение только при успешной инициализации;
`failReason` – описание ошибки инициализации. Содержит значение только в случае ошибки инициализации.

Чтобы задать эти переменные, используйте триггер с типом **Переменная уровня данных**.

Например:

Шаг 3. Отправка параметров пользователя

Подготовка данных завершена, теперь нужно настроить их отправку. Для наглядности покажем на примере. Мы будем передавать идентификаторы клиента Google Analytics и Яндекс.Метрики в качестве параметров пользователя Яндекс.Метрики и идентификатор пользователя Google Analytics в качестве пользовательского идентификатора Яндекс.Метрики .

Чтобы получить идентификатор пользователя Google Analytics, используйте готовые функции библиотеки *analytics.js*, а именно:

ga.getAll()[0].get('clientId')

view raw file2.html hosted with ❤ by GitHub

Полный код передачи параметров добавьте в контейнер через тег с типом

«Пользовательский HTML» с правилом активации на триггер (ранее мы определили его через событие «YMReady»).

Получите следующий код:

	<script type="text/javascript">

	var supplyParams = function(){
	try
	{
	gaclid = ga.getAll()[0].get('clientId');
	}
	catch(e)
	{
	gaclid = 0
	}
	if( typeof gaclid == 'string' )
	{
	try
	{
	window['yaCounter' + {{YM -- Tracker}}].setUserID(gaclid)
	window['yaCounter' + {{YM -- Tracker}}].userParams({
	'gaclid': gaclid,
	'ymclid': {{YMCLID}}
	})
	}
	catch(e)
	{
	console.log('Something Went Wrong!');
	console.error(e);
	window.setTimeout(function(){supplyParams();}, 300);
	}
	}
	else
	{
	window.setTimeout(function(){supplyParams();}, 300);
	}
	}

	supplyParams();

	</script>

view raw file3.html hosted with ❤ by GitHub

Шаг 4 Отправка целей

Для отправки целей создайте новый тег с типом «Пользовательский HTML». Этого достаточно, поскольку ранее, при инициализации счетчика была задана функция отправки целей с проверкой наличия счетчика на странице.

Пример кода:

	<script type="text/javascript">
	window.goalSender('hello_there', function(){
	console.log('We\'ve just sent hello to Metrika')
	});
	</script>

view raw file4.html hosted with ❤ by GitHub

Активируйте подобный тег на интересующее вас событие, дополнительных настроек в этом случае не потребуется.

Заключение

Эта модель внедрения счетчика Яндекс.Метрики дает ряд преимуществ по сравнению со стандартным вариантом:

в системе Google Tag Manager сохраняется событие-индикатор готовности счетчика Метрики и значение идентификатора пользователя Яндекс.Метрики, которое можно передавать в другие системы аналитики;
в Яндекс.Метрику отправляются значения идентификаторов Google Analytics и Яндекс.Метрики в качестве параметров пользователя;
идентификатор пользователя Google Analytics определяет пользовательский идентификатор Яндекс.Метрики.