Question

我正在尝试使用reactjs实现GTM。我使用了react-google-tag-manager，但它没有解决目的。不知何故，数据层需要采用特定的格式，并且需要在标签的正下方，但它只是我一次可以实现的其中一种。我尝试将代码直接放在template.html中，并从我想要的组件中调用该函数，但这并不起作用。

import React from 'react';
import gtmParts from 'react-google-tag-manager';

class GoogleTagManager extends React.Component {
   componentDidMount() {        
       const dataLayerName = this.props.dataLayerName || 'dataLayer';
       const scriptId = this.props.scriptId || 'react-google-tag-manager-gtm';

       if (!window[dataLayerName]) {
           const gtmScriptNode = document.getElementById(scriptId);

           eval(gtmScriptNode.textContent);
       }
   }

   render() {

       const gtm = gtmParts({
           id: this.props.gtmId,
           sourcegroup: this.props.gtmGroupname,
           sourceid:this.props.gtmSource,
           age:this.props.age,
           mtongue:this.props.gtmMtongue,
           city:this.props.city,

       });

       return (
           <div>
               <div>{gtm.noScriptAsReact()}</div>
               <div id={this.props.scriptId || 'react-google-tag-manager-gtm'}>
                   {gtm.scriptAsReact()}
               </div>
           </div>
       );        
   }
}

export default GoogleTagManager;

我在DataLayer中推送参数，并在检查google tag assistant插件时，整个数据表是空的。

Answer 1

昨天我遇到了这个问题，为了解决这个问题，我必须将我想要记录的所有属性都放在additionalEvents属性下。像这样：

const gtm = gtmParts({
    id: this.props.gtmId,
    additionalEvents: {
         sourcegroup: this.props.gtmGroupname,
         sourceid:this.props.gtmSource,
         age:this.props.age,
         mtongue:this.props.gtmMtongue,
         city:this.props.city
    }
})

并且还避免使用eval()，因为这是一个危险的宣传。像这样更新您的代码：

if (!window[dataLayerName]) {
    const script = document.createElement("script")
    const gtmScriptNode = document.getElementById(scriptId)
    const scriptText = document.createTextNode(gtmScriptNode.textContent)

    script.appendChild(scriptText)
    document.head.appendChild(script)
}

如何使用reactjs实现GTM

1 个答案: