Установка скрипта подмены номеров в GTM используя переменную

Остановимся детально на этом варианте установки.
Он предпочтителен, когда активен и установлен счетчик Universal Analytics через диспетчер тегов на каждой странице сайта, но в его настройках уже указан следующий тег для активации. В таких случаях, просто создать еще один тег с нашим скриптом не выйдет. Необходимо будет создавать отдельную переменную.

ВАЖНО!
Наш сервис поддерживает код отслеживания Universal Analytics. Если у вас в GTM он уже ранее был создан, то нужно редактировать именно его. Если же нет, то тогда создать новый.

kiss_61kb.1457363256.jpg

Для изменения существующего тега нажимаем на его название после чего появится возможность его редактировать.

kiss_11kb.1457363797.jpg

Создание тега Universal Analytics

Если ранее вы использовали в GTM классический счетчик Analytics, то нажимаем кнопку “Создать” и далее создадим новый тег Universal Analytics.

  1. Даем произвольное, но понятное название тегу и выбираем среди предоставленного списка продуктов Google Analytics.

kiss_67kb.1457365344.jpg

2. Указываем тип тега как Universal Analytics

kiss_31kb.1457365578.jpg

3. Заполняем поле “Идентификатор отслеживания”- указываем Google Analytics id сайта. Он имеет вид UA-12345678-9

Потом переходим в “Дополнительные настройки”

kiss_38kb.1457366206.jpg

4. Тут нам нужно добавить новое поле

kiss_11kb.1457366454.jpg

Добавляя поле, кликаем на пустое поле названия и выбираем из списка hitCallback, а в строке значение нажимаем справа на значок с “+” и выбираем новая переменная.

kiss_35kb.1457367080.jpg


kiss_30kb.1457367304.jpg

5. Указываем параметры переменной:

Название - callback

Типа переменной - Собственный код JavaScript

Сам код (скрипт) переменной -

function () {
return function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'callback'});
return true;
}}


kiss_76kb.1457367725.jpg

kiss_62kb.1457368363.jpg

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

kiss_46kb.1457369746.jpg

6. В конце указываем триггер активации тега “Все страницы” (появится правило All Pages) и создаем тег.

kiss_35kb.1457369890.jpg

Созданный нами тег будет находиться в разделе теги.

kiss_42kb.1457370157.jpg

Создание тега Ringostat

Помимо изменений которые мы внесли в тег Universal Analytics, нам предстоит создать еще один тег - назовем его Ringostat.

  1. Создаём тег с типом " Пользовательский тег HTML", и называем Ringostat.

145753999911_kiss_84kb.jpg

  1. Вставляем в окно “Настройка тега” скрипт подмены номеров.
<script type="text/javascript">
   (function (d, s, u, e, p) {
       window.ringostatConfig = {
           numbers: {
               common: {
                   class: 'ringo-phone',
                   mask: '+# (###) ###-##-##'
               }
           }
       };
       p=d.getElementsByTagName(s)[0],e=d.createElement(s),e.async=1,e.src=u,p.parentNode.insertBefore(e,p);
   })(document, 'script', 'https://ringostat.com/numbers/v3/ringostat.min.js');
</script>


ВАЖНО!
ringo-phone - класс который мы присваивали HTML элементам, выделяя номера на страницах сайта.

+# (###) ###-##-## - маска вывода номера, где # - означает число. С помощью маски вы задаете вид, который будет иметь номер на вашем сайте. Например, данная маска отобразит номер так +7 (495) 123-45-67. А маска 8 (###) ###-##-##, тот же номер как 8 (495) 123-45-67.

Практически, можно настроить маску таким образом, чтобы подмененный номер по стилю не отличался от номера по умолчанию на вашем сайте. К примеру, для выделения кода города красным цветом, нужно указать такую маску: "+ #<span style="color: red;">(###)</span> ### - ## - ##".

А если у вас есть необходимость сделать отображаемый номер кликабельным, т.е. Click to Call подменяемого номера, вам следует установить маску следующего вида: <a href="tel:<t>">+# (###) ##-##-##</a>.

145763255560_kiss_50kb.jpg

Далее переходим к настройке условий активации тега.

3. Для создания триггера активации выбираем в перечне типов вариант “Еще” и создаем новый триггер.

145754231092_kiss_27kb.jpg

4. Триггер, тоже называем "Ringostat", тип выбираем “Пользовательское событие”. В условиях активации “Имя события” пишем - callback и создаём триггер.

145754321315_kiss_53kb.jpg

5. В итоге мы должны получить вот такой тег:

145754385683_kiss_59kb.jpg

Публикация GTM

Таким образом мы проделали две операции:

  • Создали/отредактировали в GTM тег Universal Analytics дополнив его переменной, которая будет сигналом для скрипта подмены
  • Создали тег Ringostat в GTM, в который и поместили сам скрипт подмены. Он по сигналу переменной будет искать на сайте элементы с нужным классом и подменять номер телефона

Нам осталось предварительно просмотреть все ли мы верно настроили, и убедиться, что происходит подмена номера на сайте. А потом опубликовать внесенные изменения в GTM.

145754654068_kiss_72kb.jpg

На этом установка на сайт скрипта Ringostat через GTM завершена.

Была ли статья полезной?