How to set-up Shopify Custom Pixel App

The Custom pixel is one of the two options we have build to help you integrate AB Tasty in your Shopify workflows. To know more about the two options and decide which one you should use, please refer to the AB Tasty integration with Shopify article.

To use the extension, you must be an AB Tasty customer. To complete the installation, you will need your AB Tasty identifier (the ID of your tag).
You must use Shopify Hydrogen or other Headless Framework
This application works as a standalone

1. Log In Shopify
2. Go to Your store > Settings > Customer events.
3. Copy and adapt the code snippet below.
4. To retrieve your AB Tasty identifier, access the Generic tag page
5. Copy your AB Tasty account identifier in the Implement the AB Tasty tag section.
6. Finish the creation of the custom pixel

Code snippet example:

// REQUIRED
const ABTASTY_IDENTIFIER = "REPLACE_ME_WITH_YOUR_IDENTIFIER";

// OPTIONAL
const FEATURE_EXP_ENVIRONMENT_ID = ""; // see more https://www.abtasty.com/feature-experimentation/

// Load AB Tasty tag
(function (i, s, o, g, r, a, m) {
i.abtiming = 1 * new Date();
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
console.log("ABTASTY: loading tag with identifier:", ABTASTY_IDENTIFIER);
})(window, document, "script", `//try.abtasty.com/${ABTASTY_IDENTIFIER}.js`);

const visitorId = document.cookie.match(/FLAGSHIP_VISITOR_ID=([^;]+)/i)?.[1];

analytics.subscribe("checkout_completed", async (event) => {
const {
order,
lineItems,
transactions,
currencyCode,
discountApplications,
totalPrice,
shippingLine,
totalTax,
delivery,
} = event.data.checkout;

const discountCodes = discountApplications.filter(
({ type }) => type === "DISCOUNT_CODE",
);

const payment = transactions[0];
const paymentMethod = payment?.paymentMethod?.name ?? payment?.gateway ?? "";

const shipping = delivery?.selectedDeliveryOptions[0];
const shippingMethod =
shipping?.title ?? shipping?.description ?? shipping?.type ?? "";

const transactionPayload = {
ta: "Purchase",
tid: order?.id ?? Math.random().toString(36).substring(7),
tr: totalPrice?.amount ?? 0,
tt: totalTax.amount,
tc: currencyCode ?? "",
tcc: discountCodes.map(({ title }) => title).join(", "),
icn: lineItems.reduce((acc, item) => acc + item.quantity, 0),
ts: shippingLine?.price.amount,
pm: paymentMethod,
sm: shippingMethod,
};

await waitFor(() => typeof window.abtasty !== "undefined");

window.abtasty.send("transaction", transactionPayload);

if (FEATURE_EXP_ENVIRONMENT_ID && visitorId) {
window.abtasty.send("transaction", {
...transactionPayload,
ds: "app",
cid: FEATURE_EXP_ENVIRONMENT_ID,
vid: visitorId,
});
}
});

const waitFor = (condition) => {
const TIMEOUT = 5000;

return new Promise((resolve, reject) => {
const startTime = Date.now();

function checkCondition() {
if (condition()) {
resolve();
return;
}

if (Date.now() - startTime > TIMEOUT) {
reject(new Error("Timeout waiting for condition"));
return;
}

setTimeout(checkCondition, 100);
}

checkCondition();
});
};

if (FEATURE_EXP_ENVIRONMENT_ID && !visitorId) {
console.log(
"ABTASTY: No visitor id found. Make sure you have the FLAGSHIP_VISITOR_ID cookie",
);
}