How to properly implement a custom Spotify Ad Analytics Pixel?

Topic summary

A user is attempting to implement Spotify Ad Analytics tracking pixels on their Shopify store to measure podcast ad attribution. Since Spotify lacks a native Shopify integration, they’re using custom pixels via Shopify’s Pixels Extensions API.

Core Problem:
Spotify reports that both the page view and purchase pixels are firing identical numbers, indicating a tracking implementation error.

Technical Context:

  • The user has created two separate custom pixels: one for page views (subscribing to ‘page_viewed’ event) and one for purchases (subscribing to ‘checkout_completed’ event)
  • Both pixels include Spotify’s base tracking script that loads from pixel.byspotify.com
  • The purchase pixel code appears corrupted or improperly formatted in the second half, with reversed/garbled text

Current Status:
The implementation is non-functional. The user explicitly states they cannot code and is seeking guidance on proper implementation. The malformed purchase pixel code suggests either a copy-paste error or encoding issue that needs correction before the tracking can work properly.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

I am running some ads on a podcast, and the agency wants me to implement a pixel from Spotify Ad Analytics in order to track attribution. Spotify does not have a Shopify app, so it mandates a custom pixel. I attempted to combine the code(s) from Spotify with additional code from the Shopify Pixels Extensions API to subscribe to the ‘page view’ and ‘purchase’ Shopify events, but now am hearing from Spotify that “the page view and purchase pixel are sending back identical numbers of fires.” I do not know how to code, so any advice would be welcome.

Here’s what I’ve got for the ‘page view’ pixel:

// Installation script generated by Ad Analytics
(function(w, d){
var id=‘spdt-capture’, n=‘script’;
if (!d.getElementById(id)) {
w.spdt =
w.spdt ||
function() {
(w.spdt.q = w.spdt.q || ).push(arguments);
};
var e = d.createElement(n); e.id = id; e.async=1;
e.src=‘https://pixel.byspotify.com/ping.min.js’;
var s = d.getElementsByTagName(n)[0];
s.parentNode.insertBefore(e, s);
}
w.spdt(‘conf’, { key: ‘0939284c340e483c918f63459a20bb16’ });
w.spdt(‘view’);
analytics.subscribe(‘page_viewed’, (event) => {
// Example for accessing event data
const timeStamp = event.timestamp;

const pageEventId = event.id;

const payload = {
event_name: event.name,
event_data: {
pageEventId: pageEventId,
timeStamp: timeStamp,
},
};
});
})(window, document);

And here’s what I’ve got for the Purchase pixel:

// Installation script generated by Ad Analytics
(function(w, d){
var id=‘spdt-capture’, n=‘script’;
if (!d.getElementById(id)) {
w.spdt =
w.spdt ||
function() {
(w.spdt.q = w.spdt.q || ).push(arguments);
};
var e = d.createElement(n); e.id = id; e.async=1;
e.src=‘https://pixel.byspotify.com/ping.min.js’;
var s = d.getElementsByTagName(n)[0];
s.parentNode.insertBefore(e, s);
}
w.spdt(‘conf’, { key: ‘0939284c340e483c918f63459a20bb16’ });
w.spdt(‘purchase’, {
order_id: ‘’, // Dynamically populate from session data
discount_code: ‘’, // Dynamically populate from session data
is_new_customer: ‘’, // Dynamically populate from session data
value: ‘’, // Dynamically populate from session data
currency: ‘’,
});
analytics.subscribe(‘checkout_completed’, (event) => {
// Example for accessing event data
const checkout = event.data.checkout;

const checkoutTotalPrice = checkout.totalPrice.amount;

const allDiscountCodes = checkout.discountApplications.map((discount) => {
if (discount.type === ‘DISCOUNT_CODE’) {
return discount.title;
}
});

const firstItem = checkout.lineItems[0];

const firstItemDiscountedValue = firstItem.discountAllocations[0].amount;

const customItemPayload = {
quantity: firstItem.quantity,
title: firstItem.title,
discount: firstItemDiscountedValue,
};

const paymentTransactions = event.data.checkout.transactions.map((transaction) => {
return {
paymentGateway: transaction.gateway,
amount: transaction.amount,
};
});

const payload = {
event_name: event.name,
event_data: {
totalPrice: checkoutTotalPrice,
discountCodesUsed: allDiscountCodes,
firstItem: customItemPayload,
paymentTransactions: paymentTransactions,
},
};

});
})(window, document);

1 Like