Important Notice
This document should ONLY be used if you previously installed our Shopify link-based tracking integration before October 2024 and need to upgrade it before Shopify deprecates their “Additional Scripts” functionality on December 31st.
If you are performing a new installation, please follow the steps in Installing the SocialLadder Shopify Integration for Link-Based Tracking.
Introduction
Shopify will soon be deprecating the “Additional Scripts” feature in the checkout section. If you previously installed SocialLadder’s link-based tracking using this method, you will need to update your integration to the new setup. This document guides you through upgrading your integration to ensure continued functionality.
Steps to Upgrade Your SocialLadder Shopify Integration
Overview
The previous setup using “Additional Scripts” is being deprecated. Follow these steps to update your Shopify store with the new integration method.
Steps to Implement the New Integration
Implement the New Custom Pixel:
Go to Settings -> Customer events in your Shopify Admin.
Click on Add custom pixel.
Name the pixel (e.g., “SocialLadder-Pixel”).
Under Permissions and Data sale, select “Not required” and “Data collected does not qualify as data sale.”
Save your changes.
Add the Updated JavaScript:
In the Code section, replace the old script with the following updated JavaScript:
analytics.subscribe("checkout_completed", event => {
var slScript = document.createElement("script");
var jqScript = document.createElement("script");
var img = document.createElement("img");
// Prepare order data
var orderId = event.data.checkout.order.id;
var price = event.data.checkout.totalPrice.amount;
var quantity = 0;
var promoCode = "";
var email = event.data.checkout.email;
var currency = event.data.checkout.totalPrice.currencyCode;
// Set quantity
event.data.checkout.lineItems.forEach((lineItem) => {
quantity += lineItem.quantity;
})
// Set promo code
var discountCodeApplication = event.data.checkout.discountApplications.filter((app) => app.type == "DISCOUNT_CODE");
if (discountCodeApplication.length > 0) {
promoCode = discountCodeApplication[0].title;
}
// Send event data
slScript.onload = function() {
if (typeof window.loadSLImage === "function") {
img.onload = loadSLImage;
}
if (typeof window.SLCheckout === "function") {
SLCheckout(orderId, price, quantity, promoCode, email);
}
}
// Configure placeholder image
img.width = "1";
img.height = "1";
img.src = "";
img.id = "slPixel";
// Append elements
jqScript.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
jqScript.type = "text/javascript";
slScript.src = "https://socialladder.rkiapps.com/Shopify/socialladder-shopify.js";
slScript.type = "text/javascript"
document.body.appendChild(img);
document.head.appendChild(jqScript);
document.head.appendChild(slScript);
});
Save your changes.
Steps to Remove Previously Installed Checkout Scripts
Important:
It is recommended to make these changes during a scheduled downtime, if possible, to prevent any potential disruptions or missed sales.
After making the changes, verify the installation by performing a test sale to ensure everything is working correctly.
If you have a staging or development environment, it’s best to test and verify the updates in that environment before applying them to your live store.
In the Shopify admin, go to Settings > Checkout.
Scroll down to the Order status page additional scripts section.
Remove any existing scripts from previous SocialLadder integrations to avoid conflicts.
Click Save to confirm the changes.
Optional: Adding Currency Tracking
If your Shopify store operates in multiple currencies, you can extend tracking functionality.
Add the currency variable to the SLCheckout function. Example:
SLCheckout(orderId, price, quantity, promoCode, email, currency);
Once you’ve made your changes, click the Save button at the top of the screen, followed by Connect to enable the custom pixel. The pixel is now active and tracking.
Important:
Ensure that the currency conversion feature is enabled within the SocialLadder system to accurately track and reflect multi-currency sales data.
Please inform your Customer Success Manager (CSM) if you are using multiple currencies, so they can assist in ensuring that everything is properly configured on both Shopify and SocialLadder Platform.
Troubleshooting
If the new integration isn’t functioning after following the steps, ensure that all old scripts have been removed and the new pixel has been correctly installed.
For further assistance, please contact your Customer Success Manager.