Новые пользовательские типы событий Adobe DTM и pushState / hashChange

Если вы знакомы с правилами прямого вызова DTM, у вас может возникнуть вопрос: почему бы не использовать правило прямого вызова? Правильный вопрос: проблема в том, что правила прямого вызова создают зависимость в DTM. Если я разработчик и кто-то говорит мне, чтобы я вставил в мой код код, который ссылается на _s 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. Установите правило. Вот где это становится здорово. Вы можете использовать «детали», которые были предоставлены в событии, и вы даже можете использовать его как объект. СПАСИБО ADOBE! Здесь я отправляю событие Google Analytics с данными, которые я хочу. Вы можете ссылаться на данные, используя% event.detail%, или, если у вас есть объект, вы можете ссылаться на него как% event.detail. <>%. Смотрите пример ниже.
   
   Вероятно, я бы никогда не отправил подобное событие, но вы понимаете, как его можно использовать. И если вам нужно использовать его в пользовательском коде, например, для инструмента Adobe Analytics, вы можете ссылаться на него как _s satellite.getVar ("% event.detail.product_id%"). УДИВИТЕЛЬНЫЙ СОУС !!!

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

PushState

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

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

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

hashchange

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

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

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