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 follo…


This content originally appeared on DEV Community and was authored by mumtaz1000

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


This content originally appeared on DEV Community and was authored by mumtaz1000


Print Share Comment Cite Upload Translate Updates
APA

mumtaz1000 | Sciencx (2021-12-23T21:25:31+00:00) How to add react-gtm-module in PWA Studio. Retrieved from https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/

MLA
" » How to add react-gtm-module in PWA Studio." mumtaz1000 | Sciencx - Thursday December 23, 2021, https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/
HARVARD
mumtaz1000 | Sciencx Thursday December 23, 2021 » How to add react-gtm-module in PWA Studio., viewed ,<https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/>
VANCOUVER
mumtaz1000 | Sciencx - » How to add react-gtm-module in PWA Studio. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/
CHICAGO
" » How to add react-gtm-module in PWA Studio." mumtaz1000 | Sciencx - Accessed . https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/
IEEE
" » How to add react-gtm-module in PWA Studio." mumtaz1000 | Sciencx [Online]. Available: https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/. [Accessed: ]
rf:citation
» How to add react-gtm-module in PWA Studio | mumtaz1000 | Sciencx | https://www.scien.cx/2021/12/23/how-to-add-react-gtm-module-in-pwa-studio/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.