Track events from embed & pop-up checkouts using your site’s Google Tag Manager

If you don’t want to add your Google Analytics or Google Tag Manager script to your checkouts, and instead want to pass the events on to your site’s Google Tag Manager instance, you can add a script to your website.

Step 1: Add a script to your website

This script allows you to listen to the events tracked by Checkout Page and push those events to your Google Tag Manager instance.

Checkout Page will automatically track two custom events:

Enter - whenever someone enters your checkout

Checkout - whenever someone completes your checkout

You can see the events categorized under the event name: Checkoutpage-{{checkoutId}}.

Each of the checkout events will also contain:

Value - the final purchase amount

CheckoutID - the ID of your checkout

Currency - the currency of your checkout

OrderId - the ID of your customer’s order

You can add the following script to your site, or you can add it as a Custom HTML tag in Google Tag Manager:

<script type="text/javascript">
 window.addEventListener("message", function (event) {


   // check if event is from Checkout Page
   if (event.data.type && event.data.type === "checkoutpage.event") {


     // track checkout event
     if (event.data.payload.event === "checkout") {
       window.dataLayer.push({
         event: event.data.payload.event,
         checkout: event.data.payload.checkoutId,
         value: event.data.payload.value,
         currency: event.data.payload.currency,
         orderId: event.data.payload.orderId,
       });
     }


     // track other events
     if (event.data.payload.event !== "checkout") {
       window.dataLayer.push({
         event: event.data.payload.event,
         checkout: event.data.payload.checkoutId,
       });
     }
   }
 });
</script>

Step 2: Add a trigger to track Checkout Page events in Google Analytics

1. You also need to create a trigger to ensure your Google Analytics tag tracks your Checkout Page events.
2. Here’s how to do it:
3. Open your Google Tag Manager Dashboard and click on your container
4. Under the Workspace Tab, go to Triggers From the left-hand menu to add a new trigger by clicking on New
5. Click on Trigger configuration And choose Custom event As the trigger type
6. Now you have two options for the Event name:
7. Set Event name To Checkoutpage-* To track all Checkout Page events and turn on Use regex matching
8. Set Event name To Checkoutpage-checkout To only track conversion event
9. Once you’ve entered your preference, name your trigger as Checkout Page Events And click Save To go to the next step

Step 3: Add an Event tag to report event data to Google Analytics

1. Once you’ve set up all your events and triggers, it is important to add a Google Analytics Event tag that reports all the collected data back to you.
2. Open your Google Tag Manager Dashboard and click on your container
3. Under the Workspace Tab, go to Tags From the left-hand menu to add a new tag by clicking on New
4. Click on Tag configuration To choose Google Analytics: GA4 Event As the tag type
5. Choose None – Manually Set ID And type {{Event}} As the Event name
6. Open your Google Analytics Dashboard and go to Admin From the left-hand menu
7. Select Data streams And click on your data stream
8. Copy the Measurement ID
9. Paste it into the Measurement ID Field on Google Tag Manager
10. Scroll down to click on Triggering To choose the trigger (Checkout Page Events) you created in Step 4
11. Finally, Save Your tag and that’s it!
12. Most importantly, remember to test your tag to make sure that all data is tracked and monitored correctly on your Google Analytics account.
13. Take a look at these articles to Google Analytics and Google Tag Manager:

Add Google Analytics to Checkout Page

Add Google Tag Manager to Checkout Page

Set up Google Analytics via Google Tag Manager