GTM脚本后dataLayer.push无法正常工作

Ant*_*les 3 javascript google-analytics google-tag-manager

我想使用Google跟踪代码管理器实施增强型电子商务,并希望为跟踪代码Universal Analytics推送一些数据。

我总是在GTM脚本之前创建dataLayer,但是现在我需要发送其他数据, dataLayer.push

而且它不起作用,仅当我在GTM脚本启动之前执行datalaLayer.push时,它才起作用。

例。这有效:

   <script>
    <head>
     dataLayer = [{   

            'google_tag_params': {
               'ecomm_pagetype': 'category',
               'ecomm_category': '{{ $resource->seo->h1 }}',
             }
         }];

    dataLayer.push({
              'ecommerce': {
                'currencyCode': 'EUR',    
                'impressions': [
                     {
                        'id':       '12312',
                        'price':    24,
                        'category': 'wfwefwerwerwer',
                        'position': 2,
                        'name':     'wfwefwerwerwer',  
                        'brand':   'My Brand',
                        'list':    'Product List',

                    }
                ]
              }
            });

    (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-XXXXXX');

    </script>
    </head>
Run Code Online (Sandbox Code Playgroud)

但是,如果我在GTM脚本不起作用后使用dataLayer.push,则不会发送任何数据,也不会报告任何错误。

这对我不起作用:

<head>
    <script>
         dataLayer = [{   

                'google_tag_params': {
                   'ecomm_pagetype': 'category',
                   'ecomm_category': '{{ $resource->seo->h1 }}',
                 }
             }];


        (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-XXXXXX');

    </script>
</head>

<body>

    //something content html here

    <footer></footer>

    <script>
        dataLayer.push({
          'ecommerce': {
            'currencyCode': 'EUR',    
            'impressions': [
                 {
                    'id':       '12312',
                    'price':    24,
                    'category': 'wfwefwerwerwer',
                    'position': 2,
                    'name':     'wfwefwerwerwer',  
                    'brand':   'My Brand',
                    'list':    'Product List',

                }
            ]
          }
        });
    </script>
</body>
Run Code Online (Sandbox Code Playgroud)

Max*_*Max 8

您没有遵循最佳实践,因此迟早会遇到问题

  • 始终使用.push而不是初始化:您的第一个调用是数组初始化(dataLayer = [)。这意味着,如果dataLayer已经存在,它将被完全覆盖,包括.push由GTM定制以接收推送事件的方法。现在,它可以正常工作,因为初始化后您正在调用GTM。但这是一个坏习惯。有一天,您会将GTM移到该初始化上方,或者在GTM之后添加类似的初始化调用,否则它将中断。

您的第一个电话应该是:

dataLayer = window.dataLayer || [];  
dataLayer.push({...});
Run Code Online (Sandbox Code Playgroud)
  • 始终设置event属性eventGTM使用该属性来定义触发器并知道何时可用数据。您可以有2个连续的.push调用,第一个带有event,而第二个没有,并且来自第一个的数据将在第二个事件中可用(只要该事件不会覆盖它),但是这又是一个坏习惯,玩火。

例如:

dataLayer.push({
  'event: 'ecommerce', // naming is up to you, should match your GTM triggers 
  'ecommerce': {
  ...
Run Code Online (Sandbox Code Playgroud)

在您的特定情况下,由于event缺少键,因此只要在GTM加载后它就会加载,因为GTM插入时数据已经存在。因此,在GTM push之后移动呼叫时,因为没有event属性,所以只有GTM无法知道何时有可用数据。因此,您应该:

  • 添加event密钥(总是!)
  • 配置与 event

以下是有关这些主题的更多阅读内容: