如何为gatsby使用Google跟踪代码管理器插件? [英] how to use the Google Tag Manager plugin for gatsby?
问题描述
请注意，我仍在学习使用Gatsby&反应.
Please note that I'm still learning to use Gatsby & React.
我一直在尝试找出如何正确使用Gatsbyjs的Google跟踪代码管理器插件在我的应用中插入跟踪代码.
I have been trying to figure out how to properly use the Google Tag Manager Plugin for Gatsbyjs to insert tracking codes into my app.
该插件的官方文档并没有提供很多见解和示例，所以我不确定我是否完全理解.
The official documentation of the plugin does not provide a lot of insights and examples, so I'm not sure if I understand it completely.
我想做的是在我的应用中插入两个GTM跟踪代码，一个在<head>中，一个在<body>中.使用静态网站方法，我可以将GTM跟踪代码复制并粘贴到我的HTML文档中，但是，使用盖茨比&反应，它不能那样工作.
What I want to do is to insert two GTM tracking codes into my app, one in <head> and one in <body>. With the static site approach, I could just copy and paste the GTM tracking codes into my HTML documents, however, with Gatsby & React, it does not work that way.
例如，我想在<head>
<!-- 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文件，并将以下内容粘贴在插件下
I open the gatsby-config.js file and paste the following under plugins
// 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". 但是，完成此操作并在构建后检查源代码后，它会显示
It seems like the only thing I need to do here is replacing 'YOUR_GOOGLE_TAGMANAGER_ID' with my own GTM-ID. However, after I've done that and check the source code after the build, it shows
<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>
我在这里缺少什么，请帮助
am I missing something here, Please help
推荐答案
如果您要使用问题中提到的插件，则只需将该插件插入
If you're going to be using the plugin mentioned in your question then you can just insert that plugin in gatsby-config.js file inside plugin property.
但是，如果您只想放入GTM提供的<script>标记，则必须自定义 html.js 文件.基本上，它可以让您将所需的内容放入其他任何html文件中.
However, if you just want to plop the <script> tag that GTM provides you then you'd have to customize the html.js file of gatsby a little. Basically, it will let you put anything you'd like just like in any of your other html files.
这篇关于如何为gatsby使用Google跟踪代码管理器插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
