How to set-up Shopify Custom Pixel App

The Custom pixel is one of the two options we have built to help you integrate AB Tasty in your Shopify workflows. It specifically ensures transactional hits during checkout through Shopify's checkout extensibility. However, you'll still need to inject the AB Tasty tag manually on other pages of your site to capture full user interactions. To learn 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). Your store must use Shopify Hydrogen or another Headless Framework This application works as a standalone

Installation steps

1. Log In Shopify

2. Navigate to Your store > Settings > Customer events.

3. Copy and adapt the provided code snippet (see example below)

4. To retrieve your AB Tasty identifier, access the Generic tag page

5. Copy your AB Tasty account identifier in REPLACE_WITH_YOURABTASTY_IDENTIFIER section.

6. Complete the creation of the custom pixel

Code snippet for Custom Pixel example:

// REQUIRED
const ABTASTY_IDENTIFIER = "REPLACE_WITH_YOURABTASTY_IDENTIFIER";

// OPTIONAL
const FEATURE_EXP_ENVIRONMENT_ID = "REPLACE_WITH_YOURFLAGSHIP_IDENTIFIER"; // 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 transactionId = order?.id ?? Math.random().toString(36).substring(7);
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: transactionId,
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");

const itemPayloads = lineItems.map((lineItem) => ({
tid: transactionId,
in: lineItem.variant?.title || lineItem.variant?.product.title,
ip:
(lineItem?.finalLinePrice?.amount ?? lineItem.variant?.price?.amount) /
lineItem.quantity,
iq: lineItem.quantity,
ic: lineItem.variant?.sku || lineItem.variant?.product.id,
iv: lineItem.variant?.product.type ?? undefined,
}));

window.abtasty.send("transaction", transactionPayload);
itemPayloads.forEach((itemPayload) =>
window.abtasty.send("item", itemPayload),
);

if (FEATURE_EXP_ENVIRONMENT_ID && visitorId) {
const common = {
ds: "app",
cid: FEATURE_EXP_ENVIRONMENT_ID,
vid: visitorId,
};

window.abtasty.send("transaction", {
...transactionPayload,
...common,
});

itemPayloads.forEach((itemPayload) =>
window.abtasty.send("item", { ...itemPayload, ...common }),
);
}
});

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

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

function checkCondition() {
// Check if the condition is met
if (condition()) {
resolve();
return;
}

// Check if timeout has been reached
if (Date.now() - startTime > TIMEOUT) {
reject(new Error("Timeout waiting for condition"));
return;
}

// If not met, try again after a short delay
setTimeout(checkCondition, 100);
}

// Start checking
checkCondition();
});
};

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

Injecting the AB Tasty Tag on Other Pages:

To ensure comprehensive tracking across your store, it's essential to inject the AB Tasty tag on pages outside of the checkout process. Here's how you can do it:​

1. Using the theme.liquid File for Global Scripts:

   • From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.

   • Open the theme.liquid file located in the Layout folder.

   • Insert your script tag just before the closing </head> tag for scripts that need to load early, or before the closing </body> tag for scripts that can load later. For example:​

     <!-- For scripts in the Assets folder --> <script src="{{ 'your-script.js' | asset_url }}" defer></script>

     <!-- For external scripts --> <script src="https://example.com/your-script.js" defer></script>