How to add react-gtm-module in PWA Studio

Disclaimer: I have created this tutorial on Mac and have used yarn because it is recommended by PWA Studio.

In this blog i will tell you how to add react-gtm-module in your PWA Studio storefront project. So there are some steps which need to be followed.

Step1:

Your must have a storefront project in pwa studio. You can also create a new one by using command yarn create @magento/pwa or npm init @magento/pwa.

Step2:

You must install Fooman VeniaUiOverrideResolver for PWA Studio either by using yarn add @fooman/venia-ui-override-resolver or by using npm i @fooman/venia-ui-override-resolver. The main reason behind installing Fooman extension is we need to override a component file where we will add our gtm module. For example if we want to add our gtm module in our main.js file then inside our src folder we have to create

overrides/venia-ui/components/Main/main.js and inside main.js we have to copy and paste the whole code from
node_modules/@magento/venia-ui/lib/components/Main/main.js

Step3:

Now we have created our main.js file inside src/overrides/venia-ui/components/Main we have to create an index.js file inside Main folder.

\\index.js
export { default } from './main';

Step4:

Open your package.json file and inside your "devDependencies" add "react-gtm-module" like this

"react": "~17.0.1",
"react-dom": "~17.0.1",
"react-gtm-module": "~2.0.11",

Now open your terminal and type command yarn install or npm install

Step5:

Now this is the main part where we have two options that either we add our react-gtm-module in our main.js directly or create a new component inside src/overrides/venia-ui/components/your-gtm-component-folder and then copy and paste the gtm-module code.

//Your gtm component.js
import React from "react"
import TagManager from 'react-gtm-module'

const tagManagerArgs = {
    gtmId: 'GTM-XXXXXXX'}

TagManager.initialize(tagManagerArgs)

const GoogleTagManager = () => {

    window.dataLayer.push({

        event: 'MainPageView'

      });

return(
    <h1>Hello from GTM!</h1>
)
}
export default GoogleTagManager

Now create index.js file inside your gtm component folder and write

\\index.js
export { default } from './your-gtm-component';

Step6:

Last but not least do not forget to import your gtm component inside your override main.js file and add it like so

    return (
        <main className={rootClass}>
            <Header />
            <YourGTMcomponent>
            <div className={pageClass}>{children}</div>
            <Footer />
        </main>
    );

References and helpful links:
https://developer.adobe.com/commerce/pwa-studio/
https://github.com/fooman/venia-ui-override-resolver
https://www.npmjs.com/package/react-gtm-module

Comments

[Daniel Bartylla]

The react-gtm-module is quite outdated and has not been maintained since 2019.
It's better to use this one here, especially as it is using the same notation: github.com/sooro-io/react-gtm-module