DEV Community 👩‍💻👨‍💻

mumtaz1000
mumtaz1000

Posted on

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';
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

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>
    );
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.