web-dev-qa-db-ja.com

GTMをreactjsで実装する方法

GTMをreactjsで実装しようとしています。私はreact-google-tag-managerを使用しましたが、目的は解決しませんでした。どういうわけか、データ層は特定の形式である必要があり、またタグのすぐ下にある必要がありますが、一度に達成できるのはそのうちの1つだけです。コードを直接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タグアシスタントアドオンを確認すると、datalyer全体が空です。

reactjsgoogle-tag-manager
6
learner

昨日この問題があり、解決するために、記録しようとしているすべてのプロパティを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)
}
_
5
lomse