При настройке отслеживания событий на сайте через Google Tag Manager (GTM) нередко возникает необходимость использовать динамические значения, подставляемые из Data Layer переменных, в JavaScript-код. Однако не во всех случаях подстановка отрабатывает корректно.
Рассмотрим ситуацию, когда нам нужно отправить в Яндекс Метрику данные о взаимодействии пользователя с карточкой рекомендуемой статьи на сайте.
Проблема
Вариант кода №1 работает корректно:
<script>
var ym_params = {
'rec_cards_actions': {
'widget_type': {
'slider': {
'card_name': '{{DL.Var - dl_slider_card_name}}',
'card_position': '{{DL.Var - dl_slider_card}}'
}
}
}
};
ym(*******,'reachGoal','content_actions_recommended_slide_click',ym_params);
</script>
В данном случае GTM корректно подставляет значения переменных {{DL.Var - dl_slider_card_name}} и {{DL.Var - dl_slider_card}} внутрь строк, после чего передаёт финальный объект в функцию ym(). В результате ym_params формируется без ошибок, и событие отправляется в «Яндекс.Метрику» как задумано.
Однако, такой синтаксис не очень удобен для аналитики – удобнее было бы вложить позицию карточки внутрь ее названия.
Но следующий код не работает:
<script>
var ym_params = {
'rec_cards_actions': {
'slider': {
'{{DL.Var - dl_slider_card_name}}': {
'card_position': '{{DL.Var - dl_slider_card}}'
}
}
}
};
ym(*******,'reachGoal','content_actions_recommended_slide_click',ym_params);
</script>
Здесь мы пытаемся использовать переменную {{DL.Var – dl_slider_card_name}} в качестве имени свойства объекта. Такая конструкция приводит к проблемам при обработке кода внутри GTM. Суть в том, что GTM выполняет простую текстовую подстановку значений переменных до исполнения скрипта, и когда макрос встречается в контексте имени свойства, это часто нарушает итоговый синтаксис объекта или, в зависимости от реализации, может быть некорректно интерпретировано.
Почему так происходит?
Механизм замены переменных GTM разработан для наиболее частых сценариев, в том числе для подстановок внутри строковых значений. Когда же макрос подставляется в синтаксически критичные места, такие как имена свойств объектов, результатом может стать некорректный финальный код. Это не значит, что нельзя динамически создавать имена свойств. Просто для этого лучше использовать немного другую технику.
Решение
Вместо прямой подстановки макроса в имя свойства, можно сначала сохранить значение переменной в отдельную локальную переменную, а затем использовать эту переменную для динамического формирования объекта.
Пример:
<script>
// Сначала сохраняем значение переменной GTM в локальную переменную
var cardName = '{{DL.Var - dl_slider_card_name}}';
// Затем формируем объект, используя переменную как ключ
var ym_params = {
'rec_cards_actions': {
'slider': {}
}
};
// Динамически создаём свойство объекта:
ym_params.rec_cards_actions.slider[cardName] = {
'card_position': '{{DL.Var - dl_slider_card}}'
};
// Отправляем событие в Яндекс.Метрику
ym(*******,'reachGoal','content_actions_recommended_slide_click',ym_params);
</script>
В этом примере GTM корректно подставит значения {{DL.Var - dl_slider_card_name}} и {{DL.Var - dl_slider_card}} в строки, после чего скрипт будет выполнен в браузере, создавая объект со свойством с именем, полученным из переменной. Итоговый объект ym_params сформируется корректно, и событие успешно отправится в «Яндекс.Метрику».
Выводы
При работе с переменными GTM старайтесь использовать макросы внутри строковых значений. Если вам требуется динамически сформировать имя свойства объекта, сначала сохраните значение переменной в локальную переменную, а затем используйте эту переменную для работы с объектом. Таким образом, вы избежите проблем с подстановкой и сохраните корректную логику трекинга событий.
