将gtag事件片段放在Gatsby/React站点的头上

Question

我在感谢页面上放置事件片段时遇到问题。该网站建立在GatsbyJS中。我的想法是将事件片段放在使用React头盔中，但似乎不知道如何正确执行。我尝试了所有不同的东西，但似乎都不起作用：

<Helmet>
<script>
gtag('event', 'conversion', {'send_to': 'AW-MYID'});
</script>
</Helmet>

<Helmet>
<script
gtag('event', 'conversion', {'send_to': 'AW-MYID'});
/>
</Helmet>

<Helmet>
<script>
{`
gtag('event', 'conversion', {'send_to': 'AW-MYID'});
`}
</script>
</Helmet>

Answer 1

根据gatsby-plugin-google-gtag文档在服务器端渲染(SSR(中添加自定义事件：

typeof window !== "undefined" && window.gtag("event", "click", { ...data })

您需要首先访问window对象。当然，在检查它是否可用后，请求时间如Gatsby中的调试HTML所示。

当然，这是假设您已经在gatsby-config.js中正确安装了插件。理想的定制应该是这样的：

plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
// You can add multiple tracking ids and a pageview event will be fired for all of them.
trackingIds: [
"GA-TRACKING_ID", // Google Analytics / GA
"AW-CONVERSION_ID", // Google Ads / Adwords / AW
"DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
],
// This object gets passed directly to the gtag config command
// This config will be shared across all trackingIds
gtagConfig: {
optimize_id: "OPT_CONTAINER_ID",
anonymize_ip: true,
cookie_expires: 0,
},
// This object is used for configuration specific to this plugin
pluginConfig: {
// Puts tracking script in the head instead of the body
head: false,
// Setting this parameter is also optional
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ["/preview/**", "/do-not-track/me/too/"],
},
},
},
],