Googletagmanager с Turbolinks

Может кто-нибудь объяснить, как правильно интегрировать Googletagmanager с Turbolinks?

На обычных страницах мы просто копируем/вставляем этот код сразу после открывающего тега.

  <!-- Google Tag Manager -->
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-******"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <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=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); //f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-******');</script>
  <!-- End Google Tag Manager -->

Если я скопирую этот код на страницу с поддержкой Turbolinks, я увижу, что есть только один сетевой запрос (когда страница загружается в первый раз)


ruby-on-rails turbolinks
person knagode    schedule 20.03.2014    source источник

Ответы (4)


arrow_upward
4
arrow_downward

У меня работает обновление страниц, следуя этому руководству

Предлагается настроить виртуальный макрос URL и правило просмотра страницы в Диспетчере тегов, а затем отправить их на уровень данных:

$(document).on('page:change', function(){
  dataLayer.push({
    'event':'pageview',
    'virtualUrl': window.location.pathname
  });
});
person theisof    schedule 03.02.2015
comment
Это работает для меня. Я пытаюсь решить проблему загрузки кода GTM при каждой загрузке страницы, потому что Turbolinks вставляет DOM с новой страницы (и он находится в теге <body>). - person funwhilelost; 16.10.2015

arrow_upward
0
arrow_downward

Вы можете привязать события с помощью Turbolinks к page:load (в отличие от $(document).ready)

$( window ).on( 'page:load', function () {
  // Do something
} );

В документации Диспетчера тегов Google указано:

Диспетчер тегов Google поддерживает динамические страницы через события.

Они предоставляют некоторую документацию о событиях здесь: https://developers.google.com/tag-manager/devguide#events — но конкретная реализация будет зависеть от того, что вы делаете с GTM.

person maxshelley    schedule 21.03.2014
comment
Я просто хочу иметь базовые функции GTM. Есть ли какие-либо вызовы, которые следует вызывать на странице: загрузка? В Google Analytics — обычно мне приходится вызывать _gaq.push(['_trackPageview', '/url/of/page']); на каждой странице:загрузить - person knagode; 22.03.2014

arrow_upward
0
arrow_downward

Два существующих ответа являются неполными. Вот полное решение, а также информация о том, как настроить GTM для вашего изменения:

Добавьте это на свой сайт:

 <script type="text/javascript">
     $(document).on('page:change', function(){
         var url = window.location.href;

         dataLayer.push({
             'event':'pageView',
             'virtualUrl': url
         });
     });
 </script>

После этого зарегистрируйте триггер в Диспетчере тегов Google и свяжите этот триггер с нужными тегами.

Полные инструкции доступны здесь: http://labs.wrprojects.com/how-to-use-google-tag-manager-with-rails-and-turbolinks/

person YWCA Hello    schedule 03.06.2016
comment
Если вы используете turbolinks 5 (по умолчанию в rails 5), событие изменилось на turbolinks:load вместо page:change - person Cyril Duchon-Doris; 14.09.2016
comment
Это должен быть принятый ответ. Я пробовал это с Realtime, и он меняет URL-адрес. - person Ardee Aram; 23.05.2019

arrow_upward
0
arrow_downward

Реализуйте диспетчер тегов Google с помощью turbolink 5. скопируйте приведенный ниже код и вставьте в заголовок.

        <!-- Google Tag Manager -->
        <% if Rails.env.production? %>
        <script>
        document.addEventListener('turbolinks:load', function(event) {
          var url = event.data.url;

          dataLayer.push({
            'event':'pageView',
            'virtualUrl': url
          });
        });

        (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','[YOUR-GTM-ID]');
        </script>
        <% end %>
        <!-- End Google Tag Manager -->
person Marcelo Austria    schedule 11.04.2018