Javascript 如何使用Gatsby在不同页面上设置不同的Google Tag Manager脚本？_Javascript_Gatsby_Google Tag Manager_Strapi

Javascript 如何使用Gatsby在不同页面上设置不同的Google Tag Manager脚本？

javascript gatsby

Javascript 如何使用Gatsby在不同页面上设置不同的Google Tag Manager脚本？,javascript,gatsby,google-tag-manager,strapi,Javascript,Gatsby,Google Tag Manager,Strapi,我正在尝试根据从Strapi收到的数据创建页面。每个页面必须有一个从GTM_id字段派生的唯一Google Tag Manager脚本。我不知道如何在onRenderBody中获取此数据。可能吗？有没有更正确的方法来解决这个问题 // My "gatsby-node.js exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions const result

我正在尝试根据从Strapi收到的数据创建页面。每个页面必须有一个从

GTM_id

字段派生的唯一Google Tag Manager脚本。我不知道如何在

onRenderBody

中获取此数据。可能吗？有没有更正确的方法来解决这个问题

// My "gatsby-node.js

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(
    `
      {
        landings: allStrapiLandings {
          edges {
            node {
              strapiId
              URL
              GTM_id
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  const pages = result.data.allStrapiLandings.edges
  pages.forEach((page) => {
    createPage({
      path: `/${page.node.URL}`,
      component: require.resolve("./src/templates/landing.js"),
      context: {
        id: page.node.strapiId,
      },
    })
  })
}

//我的“盖茨比ssr.js”
const React=require（“React”）
const{oneLine，stripeindent}=require（“公共标记”）
//这里将是GTM tpl
const generateGTM=（路径名）=>stripIndent`console.log（“head”）`
//这里将是GTM tpl
const generateGTMIframe=（）=>stripIndent`console.log（“正文”）`
exports.onRenderBody=（{setHeadComponents，setPreBodyComponents}）=>{
Sethead组件([
,
])
setPreBodyComponents([
,
])
}

// My "gatsby-ssr.js"

const React = require("react")
const { oneLine, stripIndent } = require("common-tags")

// here will be GTM <head> tpl
const generateGTM = (pathname) => stripIndent`console.log("head")`

// here will be GTM <body> tpl
const generateGTMIframe = () => stripIndent`console.log("body")`

exports.onRenderBody = ({ setHeadComponents, setPreBodyComponents }) => {
    setHeadComponents([
      <script
        key="my-gtm-implementation"
        dangerouslySetInnerHTML={{
          __html: oneLine`${generateGTM()}`,
        }}
      />,
    ])

    setPreBodyComponents([
      <script
        key="my-gtm-implementation"
        dangerouslySetInnerHTML={{
          __html: oneLine`${generateGTMIframe()}`,
        }}
      />,
    ])
}