Shopify

You add pagent to your Shopify theme once. It then loads on every page of your store. This takes about five minutes. Copy your pagent snippet. You find it in the install step after you start your trial, and any time later in pagent under Settings → Setup. It looks like this, with your own client key:

<script
  src="https://cdn.pagent.ai/js/sdk.js"
  data-client-key="YOUR_CLIENT_KEY">
</script>

Paste it unchanged. Don’t add async, defer or type="module": pagent needs to load before your page shows, so visitors never see the original flash.

Add the snippet to your theme

Open your themes

In your Shopify admin, go to Online Store → Themes.

Make a backup

Next to your current theme, click ⋯ → Duplicate. Shopify keeps the copy, so you can always go back.

Open the code editor

Next to your current theme, click ⋯ → Edit code.

Open theme.liquid

In the file list, open Layout → theme.liquid.

Paste the snippet

Find the line <head> near the top. Paste your snippet on the next line, right after <head>.

Save

Click Save. The change is live on your store straight away.

When you update your theme, Shopify carries your code changes over, unless they conflict with the update. Check that the snippet is still in theme.liquid before you publish the new version.

Tests run on your storefront pages: home, collections, products, cart and your other pages. Shopify doesn’t run your theme’s code on its checkout, so tests stop at the last step before checkout. To count the orders that follow, add the pixel below.

Check it worked

Open your site in a private browser window, so no cached version shows.
Back in pagent, click Check connection in the install step. If you’ve finished setup already, open Settings → Setup: it shows You are ready once pagent has received visits from your site.
pagent loads your live site and looks for the snippet. When it finds it, you can start your first test.

pagent couldn’t find the snippet? Make sure you published or saved the change on your live site, then check again. If you installed it through Google Tag Manager, open your site once in a normal browser window first.

Count orders and revenue

Your theme snippet can’t see Shopify’s checkout, so orders aren’t counted yet. A custom pixel reports every order to pagent, with its revenue, currency and products. It only tracks: your tests still run on your storefront.

Copy your pixel

In pagent, go to Settings → Setup, open Shopify and click Copy. The pixel already contains your client key.

Add a custom pixel in Shopify

In your Shopify admin, go to Settings → Customer events and click Add custom pixel (or Add pixel). Name it pagent.

Paste, save and connect

Under Customer privacy, set the permission to Analytics. Paste the pixel into the code field, then click Save and Connect (or Connect pixel).

Create a purchase goal

In pagent, create a conversion goal with the tag purchase. Orders arrive without it too, but you need the goal to pick them for a test.

Check it

Place one test order and check that it shows up in pagent.

What the pixel does

It loads pagent in analytics-only mode and reports each completed checkout once, even if the thank-you page is reloaded. Each order includes its revenue, currency and line items, so a goal can also target specific products.

// pagent order tracking for the Shopify checkout.
var script = document.createElement("script");
script.src = "https://cdn.pagent.ai/js/sdk.js";
script.setAttribute("data-client-key", "YOUR_CLIENT_KEY");
script.setAttribute("data-analytics-only", "true");
document.head.appendChild(script);

analytics.subscribe("checkout_completed", function (event) {
    var checkout = event.data.checkout;
    var order = checkout.order || {};
    var orderId = order.id || null;

    // Shopify can replay this event when the thank-you page is reloaded.
    // Wrapped: if storage is unavailable, send the order rather than lose it.
    try {
        if (orderId) {
            if (localStorage.getItem("pgnt-order-" + orderId)) return;
            localStorage.setItem("pgnt-order-" + orderId, "1");
        }
    } catch (e) {}

    var items = (checkout.lineItems || []).map(function (line) {
        var variant = line.variant || {};
        var product = variant.product || {};
        var price = variant.price || {};
        return {
            title: line.title || null,
            product_id: product.id || null,
            variant_id: variant.id || null,
            quantity: line.quantity || 0,
            price: Math.round(Number(price.amount || 0) * 100),
        };
    });

    window._pgnt = window._pgnt || [];
    window._pgnt.push({
        kind: "conversion",
        label: "purchase",
        revenue: Math.round(Number(checkout.totalPrice.amount) * 100),
        properties: {
            order_id: orderId,
            currency: checkout.currencyCode || null,
            item_count: items.length,
            items: items,
        },
    });
});

Where your store asks visitors for cookie consent, the pixel only runs once they accept analytics. Orders from visitors who decline aren’t counted. New pixels ask for marketing consent too by default, which is why you set the permission to Analytics.

Get started

Shop platforms

Frameworks

Other ways

Cookie banners

Add the snippet to your theme

Check it worked

Count orders and revenue

​Add the snippet to your theme

​Check it worked

​Count orders and revenue

Add the snippet to your theme

Check it worked

Count orders and revenue