Подключение Server Side Tracker к ApiMonster

1. Настройка Api Monster

1.1 Перейдите в раздел “Подключения”

И нажмите “Добавить подключение”.

1.2 Выберите сервис “Service Side Tracker”

1.3 Введите название подключения

И нажмите кнопку “Создать”

1.4 Разместите полученный код на сайте и настройте отправку нужных событий

Код можно разместить или в коде сайте или через GTM. В секции HEAD или рядом с кодом метрики, google analytics или facebook.

2. Настройка GTM (Google Tag Manger)

2.1 Задача

Нужно при нажатии на кнопку отправить событие в apimonster.

Пример кнопки:

Исходный код страницы:

<!-- 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-NXHHBMR');</script>
<!-- End Google Tag Manager -->

<!-- Кнопка из скриншота -->
<button id="test_btn">Test button</button>

2.2 Настройка тега в Google Tag Manager

Как выглядит тег в общем списке

Как выглядит настройка тега

Содержимое тега

<!-- BEGIN OF APIMONSTER TRACKER CODE FOR INTEGRATION 9999 -->
<script type="text/javascript">
    var apiMonsterConf = {
        "hash": "d87a5ef89e2ed6f90f4edec71d48c2c2",
        "apiUrl": "https://api.apimonster.io/",
        "webhookUrl": "https://api.apimonster.ru/webhooks/405/1920/58/d87a5ef89e2ed6f90f4edec88848c2c2/"
    };
    (function (u, t, m) {
        var s = u.createElement(t), n = u.getElementsByTagName(t)[0];
        s.type = "text/javascript";
        s.async = true;
        s.src = m + "?v=" + Date.now();
        n.parentNode.insertBefore(s, n);
    })(document, "script", "//static.apimonster.ru/js/tracker.min.js");
</script>
<!-- END OF APIMONSTER TRACKER CODE FOR INTEGRATION 9999 -->

<!-- Код, который на событие onclick кнопки добавляет отправку запроса в apimonster -->
<script type="application/javascript">
  
    //find dom element
    element = document.querySelector('#test_btn')

    //set onclick event
    if (element){
        element.onclick = function (){
            amt_client.sendEvent({"event": "testEvent"});
            console.log('testEvent worked!');
        }
    }
</script>

2.3 Пример привязки событий к кнопкам на сайте

Верстка кнопки

<button id="test_btn">Test button</button>

Пример кода

<script type="application/javascript">
  
    //find dom element
    element = document.querySelector('#test_btn')

    //set onclick event
    if (element){
        element.onclick = function (){
            amt_client.sendEvent({"event": "testEvent"});
            console.log('testEvent worked!');
        }
    }
</script>

Вы можете реализовать подобную логику любым доступным в рамках GTM способом.

2.4 Публикация изменений

После внесения изменений в GTM, не забудьте их опубликовать.

2.5 Проверка работы

Если вы все сделали правильно на основе примера.

В консоли хрома появится тестовое сообщение.

В apimonster уйдет XHR(Ajax) запрос.

3. Создание связок

Типовой пример создания связок смотрите здесь.