Таблица регулярных выражений в GTM.

В статье создадим динамический виджет сообщения собществ + бонус: сократим количество тегов для пикселей под разные сайты внутри 1 проекта.

ТЗ:

1. Виджет должны видеть ТОЛЬКО авторизованные в ВК пользователи, которые могут написать - подробно в этой статье.
2. В профиле каждого специалиста на сайте должен запускаться виджет от его сообщества.
3. У каждого специалиста должна всплывать своя подсказка (предложение).

Результат, чтобы было ясно к чему шли:

Определяем ID сообщества и текст Подсказки для каждого фотографа

Идентифицировать фотографов я решил по переменным в URL их профилей.

Пример ссылки профиля специалиста на сайте: https://fotkay.ru/member/13

fotkay.ru/ - хост

member/ - путь, означает, что мы в профиле специалиста

13 - ID специалиста.

Для работы я использовал пользовательские переменные типа «Таблица регулярных выражений» в Google Tag Manager.

1 of 2

GTM должен подставлять ID сообщества и Подсказку в зависимости от того, на чьей странице находится пользователь. Для этого я создам 2 переменных типа «Таблица регулярных выражений»:

1. {{VK Widget ID PATH}} - определит id сообщества для каждого фотографа (скрин 1)
2. {{VK Widget Text PATH}} - определит Подсказку для виджета у каждого фотографа (скрин 2)

Входная переменная - я выбрал {{Page Path}} - чтобы GTM ориентировался на инфу из пути URL, где находится пользователь.

Шаблон (ключ / регулярное выражение) - я прописал регулярные выражения в формате member/{ID}, перечислив ID специалистов на сайте.

Результат (значение / переменная) - ID сообщества (скрин 1), Подсказка (скрин 2, лимит 100 символов).

1 of 2

P.S. Таблица регулярных выражений очень сильно помогает упростить работу в GTM, если у вас большое количество однотипных тегов/триггеров/переменных.

Ну и сам код

Создайте ТЕГ типа «Пользовательский HTML».

Если у вас еще не настроено подключение к ВК (не установлен пиксель), то вставьте следующий код для подключения к ВК

<script src="https://vk.com/js/api/openapi.js?169" type="text/javascript"></script>

Далее код виджета с созданными переменными:

<div id="vk_community_messages"></div>
<script type="text/javascript">
  VK.Widgets.CommunityMessages("vk_community_messages", {{VK Widget ID PATH}}, {
    tooltipButtonText: {{VK Widget Text PATH}},
    disableExpandChatSound: 1,
    disableNewMessagesSound: 1,
    expandTimeout: 30000,
    onCanNotWrite: function(reason) {
      // Проверка причины и удаление виджета
      if (reason === "offline" || reason === "no_access" || reason === "disabled_messages" || reason === "cant_write") {
        var widgetContainer = document.getElementById("vk_community_messages");
        if (widgetContainer) {
          widgetContainer.innerHTML = ""; // Удаление содержимого контейнера
        }
      }
    }
  });
</script>

Условие триггера: URL содержит «member» (профиль специалиста)

Бонус

С помощью таблицы регулярных выражений можно сильно упростить работу с GTM при настройке однотипных целей, счетчиков и т.д. Вот пример установки динамических счетчиков mail.ru, VK, YA.Metrika:

<!-- Top.Mail.Ru counter -->
<script type="text/javascript">
var _tmr = window._tmr || (window._tmr = []);
_tmr.push({id: "{{Counter-Mail.ru}}", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
  if (d.getElementById(id)) return;
  var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
  ts.src = "https://top-fwz1.mail.ru/js/code.js";
  var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
  if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
})(document, window, "tmr-code");
</script>
<noscript><div><img src="https://top-fwz1.mail.ru/counter?id={{Counter-Mail.ru}};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript>
<!-- /Top.Mail.Ru counter -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym({{Counter-YM}}, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true,
        trackHash:true
   });
</script>

<!-- Varioqub experiments -->
<script type="text/javascript">
(function(e, x, pe, r, i, me, nt){
e[i]=e[i]||function(){(e[i].a=e[i].a||[]).push(arguments)},
me=x.createElement(pe),me.async=1,me.src=r,nt=x.getElementsByTagName(pe)[0],nt.parentNode.insertBefore(me,nt)})
(window, document, 'script', 'https://abt.s3.yandex.net/expjs/latest/exp.js', 'ymab');
ymab('metrika.({{Counter-YM}}', 'init'/*, {clientFeatures}, {callback}*/);
</script>

<noscript><div><img src="https://mc.yandex.ru/watch/{{Counter-YM}}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

<!-- VK Retargeting counter -->
<script type="text/javascript">!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src='https://vk.com/js/api/openapi.js?169',t.onload=function(){VK.Retargeting.Init("{{Counter-VKold}}"),VK.Retargeting.Hit()},document.head.appendChild(t)}();</script><noscript><img src="https://vk.com/rtrg?p={{Counter-VKold}}" style="position:fixed; left:-999px;" alt=""/></noscript>
<!-- /VK Retargeting counter -->

Пример пользовательской переменной типа «Таблица регулярных выражений» для счетчиков mail.ru: