Goal
As a web developer or operator, we usually want to understand how members behave on the site, and we want that event data integrated into Google Analytics so we can study user behavior and use it to improve the site. For example: did the user log in, check out, which payment method did they choose, did they complete the order, and so on.
How It Works
When the member-facing site triggers a specific action, the frontend uses the Google Tag Manager API to fire a pre-configured event, which is then forwarded to the designated Google Analytics property.
Prerequisites
- Create a Google Analytics account and configure your domain
- Add the Google Analytics code to your site
- Add the GTM code to your site
Steps
First, log in to GA: Admin > Data Streams > select your data stream > copy the Measurement ID
Log in to GTM > Create Account
Next, we link the GA account with GTM and name it "GA4 Integration": Tags > New > Google Analytics: GA4 Configuration > paste the Measurement ID copied from GA earlier > All Pages > Save
On your frontend site, push events to GTM with frontend code, and GTM forwards bound events to GA.
export const checkoutViewEvent = (params: GTMProducts[]) => {
if (window.dataLayer) {
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
event: 'checkout',
ecommerce: {
checkout: {
actionField: {
step: 1,
},
products: params,
},
},
});
}
};
Create a custom event > Triggers > New > select Custom Event > set the event name to the one pushed from the frontend > Save
Link the newly created custom event to the earlier "GA4 Integration"
Tags > New > Google Analytics: GA4 Event > select "GA4 Integration" > Event Name checkout > Trigger checkout > Save
Use the Preview feature to debug and confirm GTM is receiving the events and forwarding them to GA
Finally, submit
Because event tracking, custom dimensions, and custom metrics take 24-48 hours to update, after waiting, log in to GA: Reports > Engagement > Events, and you'll see the custom events from the frontend code
Comments