Completed Checkout Custom Pixel

A Shopify custom pixel can be used to report completed checkouts to Pontiac. The pixel subscribes to Shopify’s checkout_completed customer event and sends a request to the Pontiac pixel endpoint when an order is completed.

The request can include:

• Pontiac pixel ID
• Event type
• Shopify order ID
• Completed order amount

Shopify typically triggers the checkout_completed event once per checkout on the order confirmation or Thank You page.

Before configuring the custom pixel, confirm that:

• You have access to the Shopify store’s admin settings.
• A Pontiac conversion pixel has been created.
• You know the Pontiac pixel ID that should receive the completed checkout event.

The example below uses Pontiac pixel ID 12345. Replace this value with the applicable Pontiac pixel ID.

Add the Custom Pixel in Shopify

1. Log in to the Shopify admin.
2. Go to Settings.
3. Select Customer events.
4. Open the Custom pixels section.
5. Click Add custom pixel.
6. Enter a name such as: Pontiac Completed Checkout Pixel
7. Paste the completed checkout code into the code editor.
8. Save the pixel.
9. Click Connect to activate it.

The custom pixel must be connected before it can receive customer events.

Locate the Pontiac Pixel Information

The Pontiac img pixel is provided in the following format:

Pixel URL Img: <img src=”https://pix.pontiac.media/pixel?id=12345&type=2″ width=”1″ height=”1″ />

For the Shopify implementation, use only the URL contained in the src attribute: https://pix.pontiac.media/pixel?id=12345&type=2

The URL is separated into the following values in the custom pixel template:

“https://pix.pontiac.media/pixel” + “?id=12345” + “&type=2”

Replace 12345 with the ID from the Pontiac pixel. Do not paste the full HTML <img> tag into the Shopify custom pixel.

Shopify Custom Pixel Code

analytics.subscribe("checkout_completed", (event) => {
  const checkout = event.data?.checkout;

  if (!checkout) return;

  const orderId =
    checkout.order?.id ||
    checkout.order?.name ||
    checkout.id ||
    checkout.token ||
    "";

  const orderAmount =
    checkout.totalPrice?.amount ||
    "";

  const pixelUrl =
    "https://pix.pontiac.media/pixel" +
    "?id=12345" +
    "&type=2" +
    "&order-id=" + encodeURIComponent(orderId) +
    "&order-amount=" + encodeURIComponent(orderAmount);

  fetch(pixelUrl, {
 method: "GET",
 mode: "no-cors",
 keepalive: true
 });
});

Update the Pontiac Pixel ID

In the custom pixel code, locate:

"?id=12345"

Replace 12345 with the applicable Pontiac pixel ID.

For example, if the Pontiac pixel URL is: https://pix.pontiac.media/pixel?id=67890&type=2

the corresponding portion of the Shopify code should be:

"?id=67890" +
"&type=2"

Do not change the type=2 value for a completed checkout conversion pixel unless instructed by Pontiac.

Information Sent to Pontiac

When a checkout is completed, the custom pixel sends:

• id: The Pontiac pixel ID
• type: The Pontiac event type
• order-id: The first available Shopify order or checkout identifier
• order-amount: The completed checkout total

Reach out through the Pontiac Help Center or contact your account manager for additional guidance or questions.