This guide explains how to install the SocialLadder Tracking Pixel for selling on non-Shopify eCommerce systems.
If you are using Shopify, please see this article for Shopify-specific instructions.
⚠️ Note: This requires technical setup. Involve your IT/development team.
What the Pixel Does
The SocialLadder Tracking Pixel attributes sales to ambassadors so they can be rewarded in real time.
Link attribution: Tracks purchases when customers arrive via an ambassador’s referral link.
Code attribution: Tracks purchases when customers use an ambassador’s personal referral code.
Both together: Offers maximum flexibility — sales are attributed whether the customer clicks a link or uses a code.
How It Works
Links
(step 1) An ambassador shares their referral link.
(step 2) The link redirects to your site and includes SocialLadder parameters.
(steps 3 - 6) The pixel sets a cookie in the browser, which allows tracking even if the purchase happens up to 30 days after the first click on the link.
(steps 7 - 10) At checkout, the cookie is read and combined with order data, then sent to SocialLadder for attribution.
Codes
An ambassador gives their customer a referral code.
(step 1) Users navigate to your website without using an ambassador link.
(step 3)At checkout, the customer enters this code.
(step 5) The pixel fires on the confirmation page and sends the order data + code to SocialLadder.
(step 6) The sale is attributed to the correct ambassador.
👉 When both are enabled: SocialLadder can track attribution through either method, but will use a first-touch strategy, prioritizing the cookie over the code. That means if someone clicks on an ambassador link, but on the checkout page uses a discount code the belongs to another ambassador, the one who owns the link will be the person to whom the referral will be attributed to.
Installation Overview
Links
Links
⚠️ Note: If your checkout page uses a different domain than the rest of your site (for example, your store is on brand.com but checkout happens on checkout.brand.com), sales will not be tracked correctly. This is because the cookie we place when someone clicks an ambassador link won’t carry over to the other domain. See your options for handling checkout on a different domain.
The installation involves two steps:
Landing Pages – Add the SocialLadder JavaScript to your home page and any landing pages where ambassador links may direct traffic.
Sales Confirmation Page – Add the SocialLadder checkout tracking code that reports the order data.
Step 1: Landing Page Setup (Required for Link Attribution)
Add this code snippet to the <head> section of your homepage or any landing page where an ambassador referral link could send visitors:
<script src="https://socialladder.rkiapps.com/ecom/socialladder-ecom.js" type="text/javascript"></script>
Step 2: Sales Confirmation Page Setup
On the order confirmation page, you’ll include the following snippet:
<img id="slPixel" onload="loadSLImage()" src="" height="1" width="1" />
<script src="https://socialladder.rkiapps.com/ecom/socialladder-ecom.js" type="text/javascript"></script>
<script>
SLCheckout('{{order_number}}', '{{total_price}}', '{{slquantity}}', '{{slpromocode}}', '{{slemail}}', '{{currency}}', '{{udf}}');
</script>
Replace the {{}} placeholders programmatically with your order data.
Data Fields Reference
order_number (required): Unique identifier for the order (prevents duplicates).
total_price (required): Total value of the order.
slquantity (required): Integer count of units. If not available, set to 1.
slpromocode (optional): Any discount/promo code used.
slemail (optional): Purchaser’s email address. Omit for stricter privacy.
currency (optional): Use if different from your SocialLadder default.
udf (optional): User-defined field for additional conversion data.
💡 Optional: If you want referral links to automatically apply a discount when they're clicked, see the Discount Setup section below.
Discount Setup
To automatically apply discounts when people click on your ambassadors' referral links, add this modified snippet instead of the standard landing page script:
<script src="https://socialladder.rkiapps.com/ecom/socialladder-ecom.js" type="text/javascript"></script>
<script>
const myTimeout = setTimeout(onload, 2000);
function onload () {
if (slCookiesExists()) {
var slDiscountCode = getSLDiscountCode();
if (slDiscountCode) {
// Option 1: Insert platform specific code here.
} else {
// Option 2: Insert platform specific code here.
}
}
clearTimeout(myTimeout);
};
</script>
Then, choose one of the following approaches:
Option 1: Apply an ambassador-specific discount from SocialLadder.
Option 2: Apply a generic discount to all ambassador-referred customers.
You’ll need to adapt this snippet based on your e-commerce platform’s documentation.
Codes
Codes
This is our simples installation, involving a single step:
Sales Confirmation Page – Add the SocialLadder checkout tracking code that reports the order data.
So, on the order confirmation page, you’ll include the following snippet:
<img id="slPixel" onload="loadSLImage()" src="" height="1" width="1" />
<script src="https://socialladder.rkiapps.com/ecom/socialladder-ecom.js" type="text/javascript"></script>
<script>
SLCheckout('{{order_number}}', '{{total_price}}', '{{slquantity}}', '{{slpromocode}}', '{{slemail}}', '{{currency}}', '{{udf}}', '{{slshop_id}}');
</script>
Replace the {{}} placeholders programmatically with your order data.
Data Fields Reference
order_number (required): Unique identifier for the order (prevents duplicates).
total_price (required): Total value of the order.
slquantity (required): Integer count of units. If not available, set to 1.
slpromocode (optional): Any discount/promo code used.
slemail (optional): Purchaser’s email address. Omit for stricter privacy.
currency (optional, link only): Use if different from your SocialLadder default.
udf (optional, link only): User-defined field for additional conversion data.
slshop_id (required): Provided by SocialLadder. You can get it from your Account Manager or Implementation Specialist.
Links + Codes
Links + Codes
Follow the same steps as Links (Landing Page + Sales Confirmation Page).
The only change is in your checkout snippet: you'll need to add slshop_id as the last parameter in SLCheckout(...) on your confirmation page.
Sales Confirmation Page Setup:
<img id="slPixel" onload="loadSLImage()" src="" height="1" width="1" />
<script src="https://socialladder.rkiapps.com/ecom/socialladder-ecom.js" type="text/javascript"></script>
<script>
SLCheckout('{{order_number}}', '{{total_price}}', '{{slquantity}}', '{{slpromocode}}', '{{slemail}}', '{{currency}}', '{{udf}}', '{{slshop_id}}');
</script>
The value for slshop_id is provided by SocialLadder. You can get it from your Account Manager or Implementation Specialist.