谷歌标签管理器数据层不发送数据答案

【问题标题】：Google tag manager dataLayer not sending data谷歌标签管理器数据层不发送数据
【发布时间】：2020-04-10 03:55:12
【问题描述】：

我正在初始化 google tag manager 和 gtag，如下所示：

@yield('styles')

@if(config('app.google_analytics_key'))
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ config('app.google_analytics_key') }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '{{ config('app.google_analytics_key') }}');
    </script>
@endif

<script>
    window['GoogleAnalyticsObject'] = 'ga';
    window['ga'] = window['ga'] || function() {
        (window['ga'].q = window['ga'].q || []).push(arguments)
    };
</script>

@yield('before_google_tag')

@if(config('app.google_tag_manager_key'))
    <!-- 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','{{ config('app.google_tag_manager_key') }}');</script>
    <!-- End Google Tag Manager -->
@endif

@yield('after_google_tag')

我有一些页面在标签管理器代码之后将数据推送到 dataLayer。一些示例是我的产品详细信息页面：

@section('after_google_tag')
<script>
    ga('require', 'ecommerce');
</script>

<script>
window.dataLayer = window.dataLayer || []
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
window.dataLayer.push({
  'ecommerce': {
    'detail': {
        'products': [{
            'name': '{{ $product->name }}',         // Name or ID is required.
            'price': '{{ $product->finalPrice }}'
        }]
    }
  }
});
</script>
@endsection

一切正常，但是当我稍后尝试在特定事件（在我的情况下将产品添加到购物车中）推送到 dataLayer 时，Google 标签助手没有检测到它，我也没有看到 https://www.google-analytics.com/r/collect?v=在“网络”选项卡中，我仅在产品详细信息推送时看到它们。

这是推动添加到购物车的代码：

window.dataLayer = window.dataLayer || [];  
// Measure the removal of a product from a shopping cart.
window.dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'BGN',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [
        {
           'name': product.name,
           'price': product.finalPrice
        }
      ]
    }
  }
});

我是在一个 Vue 组件中做的。当我在此事件之后控制台记录 dataLayer 时，我看到它使用正确的值进行了修改，但我不知道它为什么不发送请求或为什么谷歌标签助手没有检测到这些更改。

【问题讨论】：

标签： javascript vue.js vue-component google-tag-manager google-datalayer

【解决方案1】：

您不需要使用代码初始化 GA，您应该在 GTM GUI 中执行此操作。

我希望产品详细信息推送是在 DOM 加载时默认情况下 GA 跟踪的页面浏览量。

使用 GTM 设置 GA 后，您需要在触发器上将事件传递给 GA，即 dataLayer.push 事件名称。为此，请在 GTM 中创建自定义事件触发器，然后将有效负载中的数据发送到 GA。

您还需要在 GTM 中配置 GA 跟踪，以将 dataLayer 用于您的电子商务数据。

GTM 预览将向您展示哪些内容正在传递和未传递给 dataLayer，您需要创建从 dataLayer 事件触发的触发器。

【讨论】：