请注意,我仍在学习如何使用Gatsby和React。
我一直在尝试弄清楚如何正确使用Google Tag Manager插件来为Gatsbyjs应用程序插入跟踪代码。
插件的官方文档没有提供很多见解和示例,所以我不确定我是否完全理解了它。
我想要做的是将两个GTM跟踪代码插入到我的应用程序中,一个在中,另一个在中。采用静态站点方法,我可以将GTM跟踪代码复制并粘贴到我的HTML文档中,但是,对于Gatsby和React,情况并非如此。
例如,我想将以下代码插入中:
我打开gatsby-config.js文件,并在插件下方粘贴以下内容。
似乎我在这里唯一需要做的就是用自己的GTM-ID替换“YOUR_GOOGLE_TAGMANAGER_ID”。然而,在我完成这个步骤并检查构建后的源代码之后,它显示如下:
我一直在尝试弄清楚如何正确使用Google Tag Manager插件来为Gatsbyjs应用程序插入跟踪代码。
插件的官方文档没有提供很多见解和示例,所以我不确定我是否完全理解了它。
我想要做的是将两个GTM跟踪代码插入到我的应用程序中,一个在中,另一个在中。采用静态站点方法,我可以将GTM跟踪代码复制并粘贴到我的HTML文档中,但是,对于Gatsby和React,情况并非如此。
例如,我想将以下代码插入中:
<!-- 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','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
我打开gatsby-config.js文件,并在插件下方粘贴以下内容。
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-google-tagmanager`,
options: {
id: "YOUR_GOOGLE_TAGMANAGER_ID",
// Include GTM in development.
// Defaults to false meaning GTM will only be loaded in production.
includeInDevelopment: false,
// Specify optional GTM environment details.
gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_AUTH_STRING",
gtmPreview: "YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_PREVIEW_NAME",
},
},
]
似乎我在这里唯一需要做的就是用自己的GTM-ID替换“YOUR_GOOGLE_TAGMANAGER_ID”。然而,在我完成这个步骤并检查构建后的源代码之后,它显示如下:
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX;gtm_auth=YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_AUTH_STRING&gtm_preview=YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_PREVIEW_NAME&gtm_cookies_win=x"></script>
我在这里漏掉了什么东西吗,请帮忙