Add tracking pixels and codes to your checkout

Add third-party analytics and event tracking like Meta Pixel, Google Analytics or Google Tag Manager to your checkout simply by pasting in your tracking codes.

You can add tracking codes to your one-page checkout to keep track of events and conversions.

It allows you to measure how many of your visitors become customers, how your ads are performing and how people behave on your checkout pages.

Out of the box, we track visits, referrals, number of sales and total volume. You can find these analytics in your dashboard:

1. Click on the View results button for any of your pages

1. Go to Analytics

To add tracking from other services, such as Meta Pixel, Google Tag Manager and Google Analytics, you can add the tracking codes to your checkout.

Adding tracking codes to your checkout

This is how you add tracking codes to your one-page checkout:

1. Copy the tracking code that you need to add
2. Open your Checkout Page dashboard and click on your checkout
3. Open Settings and go to Tracking pixels
4. Paste the tracking code

We automatically insert the tracking codes into the head of the checkout.

Tracked events

We automatically track events for Meta Pixel, Google Tag Manager and Google Analytics. These are the events we track:

Google Analytics (GA4) We track the purchase event, containing:

• value
• one time payments: total amount paid, including setup fee, variants and discounts
• subscriptions: product price, excluding setup fee, variants, discounts
• currency
• transaction_id: order ID
• coupon: coupon code
• items
• item_id: product sku or product ID
• item_name: product name
• price: product price

Google Tag Manager We track a custom event with eventName “checkoutpage-checkout”, containing

• event: checkoutpage-checkout
• value
• one time payments: total amount paid, including setup fee, variants and discounts
• subscriptions: product price, excluding setup fee, variants, discounts
• currency: currency of the checkout
• checkout: ID of the checkout
• orderId: ID of the order

Meta Pixel For Meta Pixel, we track the Purchase event, containing:

• value
• one time payments: total amount paid, including setup fee, variants and discounts
• subscriptions: product price, excluding setup fee, variants, discounts
• currency: currency of the checkout
• checkout: ID of the checkout
• orderId: ID of the order

Once you add a Meta Pixel, Google Analytics or Google Tag Manager tracking code to your checkout, we will automatically start tracking the above events. You may have to set up additional triggers or listeners to collect the tracked events.

If you wish to track other events or track with other services, let us know via live chat or support@checkoutpage.co.

Tracking custom events

If you’ve added the checkout as an embed or pop-up to your site, you can add your own custom event tracking with JavaScript.

The checkout embed and pop-up use Window.postMessage to expose events to your site. You can use Window.addEventListener('message',...) to access and use events in any way you want.

The event exposes the following information:

• seller: your business name slug
• checkout: the checkout’s slug
• type: checkoutpage.event
• payload
• event
• enter
• checkout
• value: final purchase amount
• currency: currency of the checkout

Here is an example script that listens to these events and pushed the data into a Google Tag:

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

```