Как установить Google Tag Manager на своем сервере: пошаговый гайд

Следуя этому пошаговому руководству, вы сможете перенести функционал GTM на ваш сервер и использовать собственный поддомен вместо стандартного www.googletagmanager.com. Загрузка GTM будет происходить через ваш домен: например, gtm.example.com.

Благодарим команду DataGo! за помощь в составлении гайда.

Почему стоит установить GTM на своем сервере

• Повышенная защита данных. Вам не нужно будет беспокоиться о местоположении хранения ваших тегов, триггеров и переменных.

• Независимость от внешних сервисов. Даже если Google уйдет из России, ваша аналитическая система продолжит работать.

• Оптимизация скорости и пространства. Контейнеры GTM будут загружаться быстрее, а возможности для хранения данных расширятся.

• Соответствие законодательству РФ. Пользователи вашего сайта больше не будут напрямую обращаться к зарубежным серверам. Это поможет соблюсти требования Роскомнадзора (РКН) по контролю передачи клиентских данных.

Как это работает

Процесс основан на перенаправлении запросов к серверу Google через ваш локальный сервер при загрузке скрипта GTM.

Если говорить вкратце, такими будут основные шаги для настройки Server GTM на вашем сервере:

1. Создание двух поддоменов: один для рабочей версии контейнера, другой для режима предпросмотра.

2. Работа с серверным контейнером GTM: создание и настройка.

3. Развертывание сервисов на поддоменах: настройка серверного окружения для обработки запросов.

4. Настройка интеграции с веб-контейнером: указание новых эндпоинтов в параметрах тегов.

5. Изменения в коде сайта: замена стандартного URL GTM на ваш собственный поддомен.

А теперь подробнее.

1. Создание двух поддоменов

Для начала необходимо создать два домена третьего уровня на вашем хосте:

• gtm.domain.ru — используется для работы контейнера в режиме продакшн.

• gtm-preview.domain.ru — предназначен для работы контейнера в режиме предварительного просмотра (preview).

Режим preview нужен для предварительного просмотра. Он позволяет тестировать и проводить отладку контейнера тегов перед тем, как изменения будут опубликованы на сайте.

Почему важно использовать два домена вместо одного? Это связано с рекомендациями Google: так режим предварительного просмотра будет работать корректно.

Убедитесь, что оба домена направлены на серверы, где будет развернут сервис Server GTM.

2. Работа с серверным контейнером GTM

1. Начните с создания серверного контейнера в GTM.

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

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

3. Откройте настройки контейнера.

4. Укажите адрес preview контейнера для включения режима предварительного просмотра прямо в интерфейсе GTM.

Чтобы получить конфигурационную строку, достаточно нажать на кнопку «Настроить сервер тегов» и выбрать вариант «Добавить сервер тегов вручную».

После того, как вы укажете preview-домен, настройки контейнера должны выглядеть так:

3. Развертывание сервисов на поддоменах

1. Подготовьте выделенные или виртуальные серверы для настройки необходимых сервисов (например, можете арендовать виртуальные машины в Yandex Cloud).

2. Установите на серверах Docker и разверните предоставленный Google образ.

gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable

Для работы в режиме продакшн потребуется указать только параметр CONTAINER_CONFIG (это закодированная строка, которая формируется на основе настроек серверного контейнера GTM).

Для режима preview нужно указать дополнительные параметры:

RUN_AS_PREVIEW_SERVER=true и PREVIEW_SERVER_URL=https://gtm-preview.domain.ru

Весь входящий HTTP-трафик должен быть перенаправлен на развернутый Docker образ.

Готовая конфигурация для развертки сервисов

docker-compose.yml

version: '3.8'

services:
  gtm-prod:
    image: gcr.io/cloud-tagging-10302018/gtm-cloud-image:latest
    container_name: gtm-prod
    restart: always
    environment:
      - CONTAINER_CONFIG={base64_string}
      - PORT=8080
      - HOST=0.0.0.0
    expose:
      - "8080"

  gtm-preview:
    image: gcr.io/cloud-tagging-10302018/gtm-cloud-image:latest
    container_name: gtm-preview
    restart: always
    environment:
      - CONTAINER_CONFIG={base64_string}
      - RUN_AS_PREVIEW_SERVER=true
      - PREVIEW_SERVER_URL=https://gtm-preview.domain.ru
      - PORT=8081
      - HOST=0.0.0.0
    expose:
      - "8081"

  nginx:
    image: nginx:latest
    container_name: nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/certbot/conf:/etc/letsencrypt
      - ./nginx/certbot/www:/var/www/certbot
    depends_on:
      - gtm-prod
      - gtm-preview

  certbot:
    image: certbot/certbot
    container_name: certbot
    volumes:
      - ./nginx/certbot/conf:/etc/letsencrypt
      - ./nginx/certbot/www:/var/www/certbot
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do sleep 6h & wait $${!}; certbot renew; done'"

nginx.conf

server {
    listen 80;
    server_name gtm-test.datago.ru;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 80;
    server_name gtm-preview.domain.ru;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}


server {
    listen 443 ssl;
    server_name gtm.domain.ru;

    ssl_certificate /etc/letsencrypt/live/gtm.domain.ru/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/gtm.domain.ru/privkey.pem;

    location / {
        proxy_pass http://gtm-prod:8080;
        proxy_set_header Host $host;
    }
}

server {
    listen 443 ssl;
    server_name gtm-preview.domain.ru;

    ssl_certificate /etc/letsencrypt/live/gtm-preview.domain.ru/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/gtm-preview.domain.ru/privkey.pem;

    location / {
        proxy_pass http://gtm-preview:8081;
        proxy_set_header Host $host;
    }
}

Требования для стабильности Server GTM

Чтобы Server GTM работал стабильно, нужно построить систему с высокой доступностью и распределенной архитектурой:

• Настроить балансировку нагрузки для равномерного распределения запросов.

• Развернуть как минимум два server-side сервиса для повышения отказоустойчивости.

• Включить автоматическое скалирование ресурсов для адаптации к изменению нагрузки.

• Настроить мониторинг серверов и контейнеров с функцией уведомления о возникающих проблемах.

• Убедиться, что для доменов установлен SSL сертификат.

4. Настройка интеграции с веб-контейнером

1. В разделе «Клиенты» серверного контейнера GTM нажмите кнопку «Создать».

2. Выберите предустановленный клиент: «Google Менеджер тегов: веб-контейнер».

3. Укажите идентификатор контейнера и выберите соответствующий регион.

5. Изменения в коде сайта

Замените точку доступа в сниппете GTM на продакшн-эндпоинт https://gtm.domain.ru.

Учтите, что идентификатор GTM-XXXXXXXX при этом не меняется. Он должен быть таким же, как в текущей версии классического веб-GTM.

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://gtm.domain.ru/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

Body:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://gtm.domain.ru/ns.html?id=GTM-XXXXXXXX'"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Официальная документация по настройке от Google

• Как установить код GTM

• Как настроить сервер вручную

• Как настроить пользовательский домен

• Как загрузить скрипты Google с собственного сервера