websitelytics

Server side GTM – тестирование функционала getGoogleScript API

Опубликовано: 21 сен 2020

Часть 2  Часть 1

Клиент в серверном GTM работает, как обработчик хитов, он может преобразовывать поступающие http запросы в события. При этом он формирует http ответы. Мы можем воспользоваться этим и создать простой клиент, который позволит нам получать файл скрипта аналитики App+Web с нашего собственного сервера GTM, что дает некие плюсы, при условии, что мы подключили к серверу наш домен. Т.е. наш сервер GTM в данном случае будет выступать в роли некоего прокси-сервера. Реализовать эту задачу нам позволяет имеющийся API под названием getGoogleScript

Чтобы создать клиента в серверном GTM, создадим вначале для него шаблон:

Вводим название:

Пишем код функционала:

И добавляем необходимые разрешения:

Код функционала достаточно простой. Вначале мы импортируем все необходимые API. Затем, иcпользуя функции claimRequest(), добавляем логику того, когда наш клиент должен обрабатывать входящий запрос - когда путь в запросе равен /gtag.js . И затем обрабатываем запрос и возвращаем нужный нам скрипт с помощью функций getGoogleScript() и returnResponse(). При этом на этапе тестирования мы задаем опцию, к которой включаем режим debug для скрипта аналитики.

// Импортируем нужные нам API
const claimRequest = require('claimRequest');
const getRequestHeader = require('getRequestHeader');
const getRequestPath = require('getRequestPath');
const setResponseHeader = require('setResponseHeader');
const setResponseBody = require('setResponseBody');
const getGoogleScript = require('getGoogleScript');
const returnResponse = require('returnResponse');


// Прописываем логику обработки запроса 
if (getRequestPath() == '/gtag.js') {
  // Claim the request
  claimRequest();
  getGoogleScript('GTAG', (script, metadata) => {

    // копируем заголовки, чтобы они были такими же, как для оригинального ендпоинта
    for (let header in metadata) {
      setResponseHeader(header, metadata[header]);
    }
    setResponseHeader('content-type', 'text/javascript');
    setResponseBody(script);

    // Добавляем заголовки для CORS, чтобы не было связанных с ним ошибок
    const origin = getRequestHeader('Origin');
    if (origin) {
      setResponseHeader('Access-Control-Allow-Origin', origin);
      setResponseHeader('Access-Control-Allow-Credentials', 'true');
    }

    // Возвращаем gtag.js
    returnResponse();

    // Для тестирования работы аналитики устанавливаем режим debug
  }, {'debug': true, 'id': 'G-XXXXXXXXXX'});
}

После создания шаблона, мы можем перейти к созданию самого клиента. В качестве типа клиента выбираем наш кастомный шаблон.

Подготовив таким образом серверный GTM, нам теперь нужно переместиться в обычный GTM и создать там тег, который будет вызывать и подгружать скрипт аналитики App+Web на наш сайт. Делаем это аналогичным образом — вначале создадим шаблон, затем на его основе сам тег. Данный тег не будет иметь триггера, так как мы его привяжем к тегу аналитики App+Web в качестве предшествующего тега (setup tag), и он будет загружаться перед тегом аналитики App+Web.

// Импортируем нужные API
const injectScript = require('injectScript');
const log = require('logToConsole');

// Добавляем тег <script> в DOM и загружаем gtag.js
const url = 'https://gtm.datainsights.ru/gtag.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);
log('data =', data);

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