🛒 AccelPay Cart Events & GTM Integration Guide

AccelPay cart events occur inside an iframe and so won’t be detected by Google Tag Manager (GTM) on your site. To enable tracking for GA4 or media-partner pixels, you need to **listen for these events using **** and push them into the **.

1. Add this snippet to your site (via HTML or a GTM Custom HTML tag before GTM container):

<script>
  window.addEventListener("message", (event) => {
    const data = event.data;
    if (typeof data !== "object" || !data.action || !/^bc\-/g.test(data.action)) return;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: `accelpay.${data.action}`,      // e.g. accelpay.bc-add-item
      accelpayEvent: data.action,           // raw event name
      accelpayValue: data.value             // includes items, estimate, payload, etc.
    });
  }, false);
</script>

This listens for these six AccelPay actions exactly as they’re sent by the iframe:

• bc-view-cart
• bc-add-item
• bc-remove-item
• bc-begin-checkout
• bc-add-address
• bc-sale

When one of these events occurs inside the cart, it pushes into dataLayer like:

{
  event: 'accelpay.bc-add-item',
  accelpayEvent: 'bc-add-item',
  accelpayValue: { items, added, estimate }
}

2. Create Custom Event Triggers in GTM

For each event type:

• Trigger Type: Custom Event
• Event Name: e.g. accelpay.bc-add-item
• Trigger Fires On: All Custom Events

Create separate triggers for: bc-view-cart, bc-add-item, bc-remove-item, bc-begin-checkout, bc-add-address, and bc-sale.

3. Configure Tags (GA4, Media Partners, etc.)

Use the corresponding trigger and map dataLayer variables:

Example: GA4 tag for Add Item

• Tag Type: GA4 Event
• Event Name: add_to_cart
• Trigger: accelpay.bc-add-item
• Event Parameters: (e.g. value, items via dataLayer variables)

You can do the same mapping for other tags like Meta Pixel or Google Ads using the same triggers.

4. Verify Integration

• Use GTM Preview Mode to check that dataLayer entries appear after actions in the AccelPay cart.

• Ensure event names match exactly, e.g., accelpay.bc-begin-checkout.

• For security, you can restrict messages by origin:

  JavaScript

  if (event.origin !== "https://YOUR-ACCELPAY-DOMAIN") return;

✅ Quick Summary

1. Listen to iframe messages and push them into dataLayer.
2. Map each bc-* event to accelpay.bc-*.
3. Create GTM triggers.
4. Fire GA4 and media tags using those triggers.
5. Track view cart, add item, checkout, and purchase seamlessly.

With this guide, even non-technical users can copy, paste, and set up end-to-end tracking with ease. 🎉