Google跟踪代码管理器dataLayer未发送数据

时间:2019-12-17 15:49:03

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

我正在像这样初始化Google标记管理器和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标记助手未检测到它,也看不到{{{1 }}的“网络”标签中,我仅在产品详细信息推送中看到它们。

以下是添加到购物车中的代码:

https://www.google-analytics.com/r/collect?v=

我正在Vue组件中进行操作。 当我在此事件之后控制台登录dataLayer时,我看到它已使用正确的值进行了修改,但是我不知道为什么它不发送请求,或者为什么Google Tag Assistant无法检测到这些更改。

1 个答案:

答案 0 :(得分:0)

您无需使用代码初始化GA,您应该在GTM GUI中进行此操作。

我希望产品详细信息推送与页面视图相关,默认情况下,当DOM加载时,GA会跟踪该页面视图。

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

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

GTM预览将向您显示正在传递或未传递给dataLayer的内容,您需要创建从dataLayer事件触发的触发器。