How to properly implement a custom Spotify Ad Analytics Pixel?

PutterCupGolf
Visitor
1 0 0

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);

Replies 0 (0)