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
Top comments (1)
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