Integrating Google Tag Manager into Plasmic-generated code.

Plasmic Studio Questions
1

Team Plasmic, We have developed a website and are using CodeGen to deploy our app via Google Cloud Services. That’s all working pretty well for us. We would like to obtain analytics from our site via Google Tag Manager.
We’re doing this in a separate next.js web application with the following code in each of our pages:
import { gtm } from ‘…/…/lib/gtm’;
gtm.push({event: ‘page_view’ });
Is there an easy way to add these 2 lines of code to the skeleton starter React page generated by Plasmic?
Or any other way of integrating GTM into our generated code?
Thanks in advance for any guidance on this!

2

I don’t know the Plasmic official answer to this, but my team does a prebuild of all code and manually ads the GTM script to the head of the index prior to deploying, then we handle all downstream code injection through GTM. Not elegant by any means, but it’s been working for us.

3

Thanks for the fast reply. That’s our fall back solution if there isn’t a better way. We have many pages and it would be lots of manual work.

4

Let me know if you find a better way of accomplishing this! We have a lot of custom code injection across many sites and it’s annoying to have to do it this way.

5

I found a way to do this by adding the tags into pages/_app/js. Here is a video that explains the process: https://www.youtube.com/watch?v=m7oQSA3c31Q

6

Here’s the code I inserted:

7

return (
<>



<Component {…pageProps} />
<Toaster
toastOptions={{
duration: 4000,
style: {
fontFamily: ‘sans-serif’
}
}}
/>

</>
)
}