На прошлой неделе звездная команда Adobe Dynamic Tag Management добавила несколько привлекательных новых функций в правила, основанные на событиях DTM. Есть 2 новых типа событий для правил, основанных на событиях, которые вы можете использовать.

1. Обычай
2. pushState или hashchange

Прочтите разделы ниже для получения дополнительной информации о каждом типе событий.

Правило, основанное на событии: пользовательское

Во-первых, давайте определим пользовательское событие. Давайте рассмотрим несколько примеров других правил, основанных на событиях, в DTM. Ниже приведен список типов событий для правил, основанных на событиях.

При создании правила на основе событий вы можете настроить его для определенных событий по умолчанию. В каждом браузере (даже в Internet Explorer) есть события по умолчанию, которые могут запускаться для определенных действий. Вот некоторые из простых:

• щелчки мыши
• mouse overs (наведение курсора на что-либо на странице)
• фокус поля формы (курсор перемещается внутри поля формы)
• поле формы размывается (курсор покидает поле формы)
• форма отправляет
• и т. д.

Все это имеет смысл; это то, что мы делаем каждый божий день в Интернете. Иногда вам нужно что-то отслеживать, и это почти невозможно сделать правильно. Вот почему я люблю использовать события JavaScript. Думайте о событии как о радиоволнах. Они транслируются для всех, но вы должны настроиться на правильную частоту, чтобы их услышать. Если вы транслируете, и никто не слушает, ничего страшного (не говорите рекламодателям на радио). То же самое с событиями: вы можете инициировать событие, и оно не вызовет никаких проблем или ошибок, если его не прослушивает что-то. И если вы прослушиваете событие, которое никогда не происходит, оно также не вызовет никаких проблем или ошибок.

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

Если вы знакомы с правилами прямого вызова DTM, вы можете спросить себя: «Почему бы просто не использовать правило прямого вызова?» Правильный вопрос. Проблема в том, что правила прямого вызова создают зависимость от DTM. Если бы я был разработчиком, и кто-то посоветовал бы мне поместить в мой код кучу кода, ссылающегося на _satellite.track, я бы усомнился в этом и, скорее всего, сказал бы «нет»! Вместо этого вы можете использовать событие, которое не имеет зависимостей.

Чтобы иметь возможность прослушивать событие, вы должны сначала вызвать его. События должны быть определены в коде сайта вашими разработчиками. Определить, когда и где его использовать, может быть немного сложно, но простое эмпирическое правило заключается в том, что если это что-то, что вы хотите отслеживать, и вы не можете отслеживать это с помощью предопределенного типа события DTM, используйте пользовательское событие. Мы можем найти полезную информацию о том, как это сделать, в Mozilla. Существует 2 основных типа событий:

• Событие — триггер о том, что что-то произошло, без отправки каких-либо дополнительных данных о событии.
• CustomEvent — добавить некоторые данные к событию

Я буду использовать пример с пользовательским событием, так как они позволяют добавлять данные. Допустим, у нас есть корзина для покупок, и когда вы что-то добавляете в корзину, она использует AJAX. Это означает, что новая страница не загружается, но вместо этого может появиться всплывающее окно или сообщение о том, что товар добавлен в корзину. Когда это происходит, я могу создать пользовательское событие, которое сообщает мне, что именно было добавлено:

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

В приведенном выше коде вы можете видеть, что я ссылаюсь на данные из объекта с именем «данные». Я определяю пользовательские «детальные» данные как объект, на который затем можно ссылаться при прослушивании события. После создания события я запускаю его для определенного элемента, в данном случае для элемента на странице с идентификатором «minicart». Теперь у меня есть специальное событие, которое транслируется для всех, кто хочет слушать.

Далее я настрою правило для прослушивания в DTM:

1. Добавить новое правило на основе событий
2. Дайте ему имя
3. Выберите тип события «Пользовательский» и введите имя события, которое мы определили как «addToCart».
   
4. Определите тег или элемент, который будет иметь это событие. Используя селекторы CSS, это будет «#minicart».
   
5. Настройте правило. Здесь становится прохладно. Вы можете использовать «деталь», которая была предоставлена ​​в событии, и даже можете использовать ее как объект. СПАСИБО АДОБЕ! Здесь я отправляю событие Google Analytics с нужными мне данными. Вы можете ссылаться на данные, используя %event.detail%, или, если у вас есть объект, вы можете ссылаться на него как %event.detail.<<name>>%. См. пример ниже.
   
   Я бы, наверное, никогда не отправил такое событие, но вы понимаете, как его можно использовать. И если вам нужно использовать его в пользовательском коде, скажем, для инструмента Adobe Analytics, вы можете указать его как _satellite.getVar("%event.detail.product_id%"). ОТЛИЧНЫЙ СОУС!!!

Это не должно было быть романом, но я хотел показать, насколько крута эта функция. Как бы мне ни нравились правила прямого вызова, в моих реализациях они отходят на второй план, а настраиваемые события занимают второстепенное место.

pushState или hashchange

pushState

Теперь давайте посмотрим на pushState. Это в основном позволяет вам обновлять URL-адрес страницы/сайта без необходимости фактически загружать новую страницу. Само по себе это ничего не делает, но позволяет использовать одностраничные приложения. Есть несколько фреймворков, использующих эту функцию. Итак, если ваш сайт построен таким образом, функция pushState может быть очень удобной!

При настройке правила вы, конечно же, выберете новый тип события.

Для его дальнейшего определения не требуются селекторы CSS. Тем не менее, вы захотите посмотреть на несколько условий. Если вы просто просматриваете новый URL-адрес, вы будете использовать путь. Вот и все!

хешчейн

Благодаря Твиттеру мы все знаем, что такое хэш (хеш-теги), поэтому хэштег должен относиться к изменению хеша! Самое классное в хэше то, что вы можете изменить его как хотите, и это не приведет к загрузке страницы. Хэши можно использовать для многих целей, поэтому мы не будем вдаваться в причины, по которым у кого-то это может быть. До появления pushState хэш нередко обновлялся новым контентом для AJAXy или одностраничных сайтов.

Чтобы настроить новое правило, выберите тот же тип события, что и pushState. Единственное отличие состоит в том, что теперь вы можете смотреть на хэш как на критерий. Например:

Заключение

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