2017-01-03 2 views
0

Как настроить GTM с TurboLinks?Динамические данные с менеджером тегов Google и TurboLinks

Проблема:

GTM и команда SEO просит меня, чтобы добавить это к моей голове:

<% if user_signed_in? %> 
    dataLayer = [{'userID': '<%= current_user.id %>'},{'userCategory': 'User'}]; 
<% end %> 
</script> 
<!-- Paste this code as high in the <head> of the page as possible: --> 
<!-- Google Tag Manager --> 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 
})(window,document,'script','dataLayer','GTM-N7MDCP');</script> 
<!-- End Google Tag Manager --> 

Это будет кэшировать TurboLinks. Я мог бы попытаться обернуть это на странице: изменить, но это не будет обновлять значения для user_signed_in и т. Д.

Могу ли я безопасно переместить это в тело, где TurboLinks обновит его? Если нет, то как еще я могу заставить GTM работать с динамическим datalayer и GTM?

ответ

1

Могу ли я безопасно переместить это в корпус, где TurboLinks обновит ?

С небольшой модификацией да.

Инициализировать (пустую) переменную dataLayer над кодом GTM.

var dataLayer = []; 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 
})(window,document,'script','dataLayer','GTM-N7MDCP');</script> 
<!-- End Google Tag Manager -- 

Любое изменение в dataLayer может быть затем добавлено через push -метода (который не является стандартным Javascript массива толчок, Google уже переписан, что для dataLayer с их собственной реализацией). Если вы добавите новое значение без собственного события (загрузка, DOM готово, окно загружено), вам также нужно добавить пользовательское событие GTM (event - это своего рода зарезервированное слово в GTM, если вы добавите объект с ключом «GTM», к массиву dataLayer GTM обновляет свою внутреннюю модель данных с новыми переменными, и вы можете использовать событие для срабатывания тегов).

Так что ваша реализация может выглядеть следующим образом (это идет в тело Также в то время как я знаю GTM я на самом деле не знаю Turbolinks, но вы получите идею.):

<% if user_signed_in? %> 
dataLayer.push({ 
'userID': '<%= current_user.id %>', 
'userCategory': 'User', 
'event':'loginStateChanged' 
}); 
<% end %> 

Теперь вы можете создать триггер в GTM типа «пользовательское событие» с именем события «loginStateChanged», и все теги, которые запускаются с/после этого триггера, будут иметь доступ к переменным userID и userCategory.

+0

Хорошо, спасибо. Если я попробую это для части заголовка GTM, мне нужно изменить основную часть тела? Тестирование сайта с предварительным просмотром не отображает событие, если страница не обновляется. Является ли GTM полагаться на page_load? – Will

+0

Я задал вторичный вопрос, который мог бы сделать это более ясным: http://stackoverflow.com/questions/41449839/google-tag-manager-preview-does-not-display-when-navigating-to-pages-with- turbol – Will

2

Согласно документации Turbolinks, вы должны добавить

document.addEventListener("turbolinks:load", function() {

в начале скрипта, который вы не хотите кэшировать (Turbolinks documentation reference).

Смотрите здесь для full example .

Сделайте то же самое для сценария pushLayer DataLayer и включите consolecript() в обоих сценариях, чтобы убедиться, что они стреляют, когда они предполагаются, и только тогда, когда они предполагаются t о.

+0

Это не работает для меня. События GTM никогда не срабатывают. Вы пробовали проверить это с предварительным просмотром/отладкой GTM? Появляются ли теги в нижнем колонтитуле? – Will

+0

также, мне нужен сценарий pushLayer для ввода данных в ERB для получения правильных значений. а не только снова запущены js с первыми значениями просмотра страницы, так что они верны после входа в систему. – Will

+0

Да, когда я запускаю его в режиме отладки GTM, окно отладки загружается только при первом загрузке страницы или обновлении последующей страницы, что довольно раздражает. Однако, если я обновляю страницу (чтобы снова отобразить режим отладки), в отладчике появляются любые события или push-данные. Причина, по которой я добавил 'console.log (« gtm fired »);' должен видеть на консоли, когда запускался GTM, независимо от того, что делал отладчик. Для кода erb - вы пытались помещать теги '' внутри кода erb? – sirbots