带有 Turbolinks 的 Googletagmanager答案

【问题标题】：Googletagmanager with Turbolinks带有 Turbolinks 的 Googletagmanager
【发布时间】：2014-04-27 03:03:46
【问题描述】：

有人能解释一下我们应该如何正确地将 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

【解决方案1】：

使用 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 -->

【讨论】：

【解决方案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/

【讨论】：

如果您使用的是 turbolinks 5（默认在 rails 5 中），则事件更改为 turbolinks:load 而不是 page:change
这应该是公认的答案。我用 Realtime 试过了，它确实改变了 URL。

【解决方案3】：

我在this guide 之后进行了页面刷新

建议你在跟踪代码管理器中设置一个虚拟的url宏和浏览量规则，然后推送到dataLayer：

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

【讨论】：

这对我有用。我正在尝试解决在每个页面加载时加载 GTM 代码的问题，因为 Turbolinks 正在从新页面插入 DOM（并且它位于 <body> 标签中）。

【解决方案4】：

您可以使用 Turbolink 将事件绑定到 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 所做的事情。

【讨论】：

我只想拥有GTM的基本功能。是否有任何应该在“page:load”上调用的调用？在 Google Analytics 上 - 我通常必须调用“_gaq.push(['_trackPageview', '/url/of/page']);”在每个“页面：加载”