Git Product home page Git Product logo

gtm-template-tag-vk-pixel's Introduction

Важно

Если на сайте уже установлен пиксель ВКонтакте и настроены события (т.е. не только Pageview) - необходимо настроить инициализацию старого пикселя перед каждым событием.

Пример:
Настроено событие начала заполнения формы:

VK.Retargeting.Event('form-fill-started');

Необходимо добавить к нему инициализацию пикселя:

VK.Retargeting.Init('ID пикселя');
VK.Retargeting.Event('form-fill-started');

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

Настройка GTM-тега

В качестве примера создадим два GTM-тега динамического ретаргетинга «ВКонтакте» с помощью данного шаблона: Pageview и AddToCart. Другие теги событий ecommerce настраиваются аналогично показанному в README тегу AddToCart.

Полную статью про создание данного шаблона можно почитать тут.

Pageview

Зайдем в нужный контейнер GTM, создаем новый тег, тип тега выбираем VK Pixel в разделе Custom: Настройка, шаг 1

Заполняем название тега, отслеживаемое событие выбираем Hit (это стандартный pageview), в поле «ID пикселей» через запятую указываем ID двух пикселей, в которые будут отправляться данные, и ставим триггер All Pages: Название

Сохраняем созданный тег.

AddToCart

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

Во-первых, необходимо передавать товар, который добавляется в корзину. Это возможно при настроенной на сайте расширенной электронной торговле Google. В таком случае данные о товаре берутся из dataLayer.

Для этого нам надо создать в GTM переменную dataLayer, которая будет хранить в себе объект ecommerce для события addToCart. Настройки переменной выглядят вот так: Настройки переменной

Во-вторых, нужно создать триггер, который будет активировать тег при наступлении события ecommerce addToCart (триггер будет активировать тег при пуше в dataLayer при событии addToCart): Создание триггера

Для других событий ecommerce необходимо создать переменные и триггеры со следующими значениями:

Событие Описание Значение переменной dataLayer Триггер
View Home Просмотр главной страницы сайта ecommerce.impressions Триггер на событие ecommerce impressions и URL = главной странице
View Category Просмотр страницы каталога сайта ecommerce.impressions Триггер на событие ecommerce impressions и URL = странице каталога
View Search Просмотр страницы с результатами поиска по сайту ecommerce.impressions Триггер на событие ecommerce impressions и URL = странице с результатами поиска по сайту
View Other Просмотр остальных страниц сайта ecommerce.impressions Триггер на событие ecommerce impressions и URL не равен главной странице, странице каталога и странице с результатами поиска по сайту
View Product Просмотр детальной страницы товара ecommerce.detail Триггер на событие ecommerce detail
Add To Cart Добавление в корзину ecommerce.add Триггер на событие ecommerce add
Remove From Cart Удаление из корзины ecommerce.remove Триггер на событие ecommerce remove
Init Checkout Начало оформление заказа ecommerce.checkout Триггер на событие ecommerce checkout
Purchase Успешный заказ ecommerce.purchase Триггер на событие ecommerce purchase

Для события View Search (просмотр страницы с результатами поиска по сайту) так же можно указать параметр URL, в который передается поисковый запрос пользователя. Например: https://example.ru/search?query=iphone - в данном примере параметр query хранит в себе поисковый запрос пользователя, этот параметр и нужно указывать.

После создания переменной с объектом ecommerce и триггера можно приступать к созданию тега: Создание тега

По порядку:

  1. В качестве отслеживаемого события выбираем Add To Cart.
  2. Заполняем через запятую ID двух пикселей, в которые необходимо передавать данные.
  3. Устанавливаем флажок «Использовать несколько прайс-листов»: для Москвы и Петербурга в нашем примере необходимо использовать разные прайс-листы.
  4. Заполняем таблицу с прайс-листами.
  5. Устанавливливаем флажок «Использовать ecommerce для передачи товаров и параметров».
  6. В объекте ecommerce этого события указываем созданную ранее переменную.
  7. Устанавливаем триггер на отслеживаемое событие, в этом случае — AddToCart.
  8. Сохраняем.

Проверка отработки

Для проверки отработки пикселей динамического ретаргетинга «ВКонтакте» нужно активировать режим Preview в GTM, перейти на наш сайт и открыть раздел Network в консоли браузера и в поле Filter ввести ‘rtrg’: Проверка в консоли

После этого обновляем страницу, и у нас должно появиться два запроса — событие Hit, отправленное в два пикселя: Событие Hit

Status 200 означает, что запросы отправлены и получены сервером успешно.

Также в окне Preview GTM видим, что наш созданный тег корректно сработал на событие Page View.

Для проверки события Add To Cart добавляем товар в корзину, и в консоли у нас появляется еще два запроса: Проверка события AddtoCart

В окне Preview GTM видим, что второй тег отработал успешно. Данные о товаре из dataLayer подтянулись и обработались корректно, также подставился корректный прайс-лист.

Для второго хоста прайс-лист также подставляется корректно: Хост

Теги для других событий настраиваются и проверяются аналогично.

gtm-template-tag-vk-pixel's People

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

gtm-template-tag-vk-pixel's Issues

Способ инициализации

Сейчас шаблон использует глобальную инициализацию:

    VK.Retargeting.Init('VK-RTRG-...')
    VK.Retargeting.Hit()

Такой способ глобально определяет id пикселя. Если другой VK пиксель был инициализирован до этого (например вне GTM кода), его id будет затерт. А события могут дублироваться в последний инициализированный пиксель.

VK api позволяет делать инициализацию другим способом:

   var vk_pixel = VK.Pixel('VK-RTRG-...');
   vk_pixel.Hit();
   vk_pixel.ProductEvent('...')

Можно ли реализовать такой способ через Custom Templates API?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.