Question

有人可以解释我们应该如何将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支持的页面中复制此代码，我可以看到只有一个网络请求（第一次加载页面时）

Answer 1

我在this guide

之后进行了页面刷新工作

它建议您在跟踪代码管理器中设置虚拟网址宏和网页浏览规则，然后将其推送到dataLayer：

$(document).on('page:change', function(){
  dataLayer.push({
    'event':'pageview',
    'virtualUrl': window.location.pathname
  });
});

Answer 2

现有的两个答案都不完整。以下是完整的解决方案，以及有关如何为您的更改配置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/

Answer 3

您可以将使用Turbolinks的事件绑定到page：load（而不是$(document).ready）

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

Google Tag Manager's documentation指定：

Google跟踪代码管理器通过事件支持动态网页。

他们在这里提供了一些关于事件的文档：https://developers.google.com/tag-manager/devguide#events - 但具体实现将取决于您使用GTM做什么。

Answer 4

使用turbolink 5实施Google代码管理器。复制下面的代码并粘贴在头部内。

        <!-- 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','GTM-MH56FWG');
        </script>
        <% end %>
        <!-- End Google Tag Manager -->

带有Turbolinks的Googletagmanager

4 个答案: