Как установить встроенную форму или виджет рекомендаций через GTM?

Для каких целей используется:
Вам нужно быстро установить ВСТРОЕННУЮ форму на определенные страницы сайта, но у вас нет ресурса разработки, чтобы внести встроенный блок в структуру страницы на сайте.
Это может быть любая встроенная форма - сбора контактов, рекомендации, информационный блок, баннеры и т. д.

Как настроить?

Шаг 1.
Получить доступ на свою почту к Google Tag Manager на изменение.
О типах доступов в GTM

Шаг 2.
Заходим в тот аккаунт GTM, на сайт которого нам нужно установить форму.
Выбираем в плашках меню "Новый тег" - Конфигурация тега - Пользовательский HTML:

Шаг 3.
Определить, какой именно код нам нужно вставлять в этот HTML

Ниже приведена стандартная структура кода для вставки:
<!--Это общий скрипт Popmechanic, если он уже был установлен, пропускаем блок-->
<!--Start of PopMechanic script-->
<script id="popmechanic-script" src="https://static.popmechanic.ru/service/loader.js?c=5918"></script>
<!--End of PopMechanic script-->


<script>
  var codeEmbed = function() {
    var $el = PopMechanic.$('<div data-popmecanic-embed="10833"></div>');
    PopMechanic.$("#atg_store_recentlyViewed_id").append($el);
    PopMechanic.embed(10833, $el);
  }
  if (window.PopMechanic && PopMechanic.loaded) {
    codeEmbed();
  } else {
    window.PopMechanic = window.PopMechanic || {};
    window.PopMechanic.onLoad = codeEmbed;
  }
</script>
В ЭТОМ КУСКЕ КОДА ВАМ НУЖНО ЗАМЕНИТЬ:

1) Сам скрипт Popmechanic

Вместо <script id="popmechanic-script" src="https://static.popmechanic.ru/service/loader.js?c=5918"></script> вы вставляете код, который указан в вашем аккаунте Popmechanic Вместо https://static.popmechanic.ru/service/loader.js?c=...</a>"> вы вставляете код, который указан в вашем аккаунте Popmechanic Вместо <a href="https://static.popmechanic.ru/service/loader.js?c=..">https://static.popmechanic.ru/service/loader.js?c=...</a>."> вы вставляете код, который указан в вашем аккаунте Popmechanic на странице установки кода
Если код уже был установлен ранее и на странице установки указано, что код найден на нужном сайте, пропускайте этот пункт.
Не нужно устанавливать код повторно, если он уже есть на сайте!

2) ID встроенной формы

В элементы <div data-popmecanic-embed="10833"> и PopMechanic.embed(10833, $el) вам нужно подставить id встроенной формы, которую вы хотите вставить на сайт.
Где этот ID взять?
Создайте встроенную форму с готового шаблона или загруженного самостоятельно.
Внизу под предпросмотром после сохранения у вас появится код для вставки такой формы.
Кроме этого в самом URL страницы тоже будет это ID (не перепутайте с ID шаблона, в ID формы должно быть 4+ цифры):

3) Селектор элемента, В КОТОРЫЙ нам нужно вставить встроенную форму

1. Установите себе расширение Selector Gadget для Google Chrome.
Оно значительно облегчит работу с поиском нужного селектора
2. Перейдите на сайт, куда вы хотите поставить форму, выберите место на странице, где она должна располагаться.
3. Активируйте Selector Gadget, поднесите курсор мыши к этому месту скопируйте его селектор.

CSS селектор - это элемент, к которому мы собираемся применить определенные свойства CSS.

Какие селекторы существуют?
  • .someClass — соответствует любому элементу с классом "someClass".
  • #someid — соответствует элементу с идентификатором "someid".
Детальная статья о поиске нужного селектора на странице
Еще одна статья об Определении CSS селеторов

Пример:
Мы хотим на сайте поставить блок встроенный подписки в футере:
- активируем Selector Gadget
- выделяем футер или другой нужный элемент, куда нужно вставить форму
- копируем полученное значение внизу.
В нашем случае значение получилось #SITE_FOOTERinlineContent


Шаг 4.
Возвращаемся в GTM
Вставляем нужный код, нажимаем галочку "Поддержка функции document.write"
Выбираем триггеры - All Pages
Сохраняем изменения.
Публикуем новую версию GTM.
Проверяем, появилась ли форма на сайте.

Можете для начала тестировать показ в предпросмотре GTM.
Важные замечания:
1) Форма, id которой вы вписываете должна находиться именно в том аккаунте, код которого стоит на сайте.
В другом случае форма не будет работать.

2) Форма должна быть активирована в аккаунте Popmechanic, выключенные формы не показываются

3) Форма должна быть именно встроенного типа - в таких формах есть под предпросмотром внизу код для вставки формы

4) Если вдруг на сайте поменяется верстка полностью и пропадет селектор, к которому мы привязываемся - форма показываться не будет.

5) Если вам нужны дополнительные параметры в коде установки формы - например, ID продукта или категории - вам нужно обратиться к разработчику, чтобы он проанализировал страницу и добавил в код установку этих дополнительных параметров.
Как установить встроенную форму только на тестовой странице?

Для того, чтобы потестировать отображение формы и активировать её только по тестовой ссылке внесите такое изменение в код, который вы вставляете через GTM:
где #pm-test = показ на странице, которая в URL содержит значение #pm-test
Тут может быть любой тестовый URL или просто добавьте к любой ссылке сайта для теста окончание #pm-test и только на ней будет активирована созданная встроенная форма.
<script>
  if (location.href.indexOf('#pm-test') > -1) {
      var codeEmbed = function() {
        var $el = PopMechanic.$('<div data-popmecanic-embed="10833"></div>');
        PopMechanic.$("#atg_store_recentlyViewed_id").append($el);
        PopMechanic.embed(10833, $el);
      }
      if (window.PopMechanic && PopMechanic.loaded) {
        codeEmbed();
      } else {
        window.PopMechanic = window.PopMechanic || {};
        window.PopMechanic.onLoad = codeEmbed;
      }
  }
</script>
Вам была полезна эта статья?