Can i get page context from `createPage()` in `onRenderBody`? #27490

mrkmx · 2020-10-16T09:49:35Z

mrkmx
Oct 16, 2020

Summary

I have a Gatsby project where several users can create landing pages with Strapi CMS. And I need to put on this pages different Google Tag Manager scripts by ID, that coming from Strapi. How can i get page context from createPage() (gatsby-node.js) in onRenderBody (gatsby-ssr.js)? Or maybe have better way to do it?

PS. I'm currently using gatsby-plugin-google-tagmanager, but it's can't does what i need.

Relevant information

Environment (if relevant)

npmPackages:
gatsby: ^2.20.31 => 2.20.31
gatsby-plugin-google-tagmanager: ^2.2.4 => 2.2.4
gatsby-plugin-postcss: ^2.2.4 => 2.2.4
gatsby-plugin-react-helmet: ^3.2.5 => 3.2.5
gatsby-source-filesystem: ^2.2.5 => 2.2.5
gatsby-source-strapi: ^0.0.12 => 0.0.12

File contents (if changed)

gatsby-config.js:

// currently I include every GTM script on all pages of the project
{
  resolve: `gatsby-plugin-google-tagmanager`,
  options: {
    id: "XXX-XXXXXXX", // for 1st user
  },
},
{
  resolve: `gatsby-plugin-google-tagmanager`,
   options: {
     id: "YYY-YYYYYYY", // for 2nd user
   },
},

package.json: N/A
gatsby-node.js:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(
    `
      {
        landings: allStrapiLandings {
          edges {
            node {
              strapiId
              URL
              GTM_id // Here i can get separate GTM ID for each page 
            }
          }
        }
      }
    `
  )

  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,
      },
    })
  })
}

gatsby-browser.js: N/A
gatsby-ssr.js:

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

// here will be GTM <head> tpl
// i have't ideas how to getGTM ID here
const generateGTM = () => 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()}`,
        }}
      />,
    ])
}

Answered by herecydev

Oct 26, 2020

I think the onRenderBody method isn't suitable for what you want. You don't have access to the pageProps or the ability to run any graphql queries. It would be much simpler to use react-helmet. You can put this into your pages, get the information from the graphql data and let react helmet build up the correct head components. This will also be statically generated as well 👍

View full answer

herecydev · 2020-10-26T19:06:15Z

herecydev
Oct 26, 2020

I think the onRenderBody method isn't suitable for what you want. You don't have access to the pageProps or the ability to run any graphql queries. It would be much simpler to use react-helmet. You can put this into your pages, get the information from the graphql data and let react helmet build up the correct head components. This will also be statically generated as well 👍

1 reply

mrkmx Oct 28, 2020
Author

@herecydev i need to render the part of GTM code in body element and react-helmet can't do it. I found workaround with useEffect and document.body.prepend, but in this case it's useless (because i need to prepend noscript tag using useEffect, it's ironic 😂)
Thanks for your reply!

jerehut · 2022-11-16T16:06:25Z

jerehut
Nov 16, 2022

The marked answer here mentions react-helmet, but as it got replaced with the Gatsby's new Head API, the answer no longer works (unless you use react-helmet).

I wrote a quick guide for an alternative way that doesn't use react-helmet, but still adds the class on build time: https://vaihe.com/blog/gatsby-dynamic-body-class/

I hope this isn't considered self promotion, just trying to update this thread as I found it while trying to do the class adding myself!

0 replies

RYRY1002 · 2024-12-08T03:13:55Z

RYRY1002
Dec 8, 2024

Bit late to the party, I know.

A solution that I came up with was manually reading the relevant page-data.json file from disk.
It's not a solution I'm very happy with, but it gets the job done.

const pageDataFile = path.join(process.cwd(), "public", "page-data", (pathname === "/" ? "index" : pathname), "page-data.json");
const pageContext = JSON.parse(fs.readFileSync(pageDataFile, "utf8")).result.pageContext;

Just make sure to pass the pathname parameter.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can i get page context from `createPage()` in `onRenderBody`? #27490

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Can i get page context from createPage() in onRenderBody? #27490

mrkmx Oct 16, 2020

Summary

Relevant information

Environment (if relevant)

File contents (if changed)

Replies: 3 comments · 1 reply

herecydev Oct 26, 2020

mrkmx Oct 28, 2020 Author

jerehut Nov 16, 2022

RYRY1002 Dec 8, 2024

Can i get page context from `createPage()` in `onRenderBody`? #27490

mrkmx
Oct 16, 2020

Replies: 3 comments 1 reply

herecydev
Oct 26, 2020

mrkmx Oct 28, 2020
Author

jerehut
Nov 16, 2022

RYRY1002
Dec 8, 2024