带有Turbolinks的Googletagmanager

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

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

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

Google 跟踪代码管理器的文档指定：

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

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