This article describes the architecture and steps to install the SocialLadder attribution mechanism for link-based tracking on a headless Shopify.
It is recommended that you also follow the instructions in this article to configure SocialLadder App in Shopify if not created.
The SocialLadder Tracking Pixel enables our platform to receive information necessary to provide credit to ambassadors for the sales they’ve driven.
When an ambassador sends their friend a link through SocialLadder, that link is a shortened link that redirects directly to your eCommerce page. The link includes several URL parameters. Your eCommerce page will need code from SocialLadder to read the URL parameters and write a cookie. The expiration date on the cookie is configurable. Once the user eventually checks out using that web browser, another piece of code from SocialLadder will read the cookie and combine that with basic order data (amount of the order etc.) and then send that information to SocialLadder’s server. SocialLadder’s server attributes the sale to the ambassador and immediately rewards / notifies them of the completion.
The below diagram outlines the technical sequence of events that enable SocialLadder to track the conversions.
NOTE: Your IT Security team should review the diagram above to understand the details of how the tracking mechanism works.
For simple deployments, your team can simply include the reference to the SocialLadder javascript in the home page or any landing page that needs to be trackable. Your IT team may want to deploy the SocialLadder tracking javascript on your servers - this is fine, simply revise the URL below to the URL of the javascript as it resides on your servers.
Installation Part 1 - Cookie Tracking:
The following code needs to be installed on the home page or any landing page that an ambassador link can be directed to:
<script src="https://socialladder.rkiapps.com/ecom/socialladder-ecom.js" type="text/javascript">
</script>
Installation Part 2 - Attribution
With the Headless Shopify installation, there are 2 approaches that can be used to send tracking information. You can choose the installation that works best for your specific needs.
Approach 1
After the order is successfully completed and the user is redirected back to the customers website.
Use the “Code Snippet 2” from the setup on your website.
Or directly call SocialLadder endpoint with necessary data:
Endpoint (GET call):
Parameters:
Action = SALE
UDF1 = Shopify Order id (Global order id not the order number)
UDF2 = Order Total
UDF3 = ShopCode set by the cookie. Retrieve using getSLCookie("sl-shop-code");
UDF4 = Units
UDF5 = Discount code if any applied.
UDF7 = Email of the customer who made the purchase.
ITBGUID = Tracking cookie. Retrieve using getSLCookie("sl-track-purchase");
UDF14 = Currency used by the store other than USD.
UDF9 = Any other custom data to send to the SocialLadder system.
NOTE: Refreshing the same page should not fire the pixel again.
Approach 2
If the user is not redirected back to the customer's website and stays on Shopify showing the order confirmation page, then the customer needs to pass the cookie value from the custom domain to Shopify store.
After generating the Shopify checkout URL, append the cookie and Shop code at the end of the checkout URL.
Parameters:
SLTrackCode = Cookie value
SLShopCode = Shop code (Provided by SocialLadder)
On the checkout page we can add additional scripts. In that the customer needs to add the script to get the parameter values from the URL and call SocialLadder endpoint with necessary data.
Endpoint (GET call):
Parameters:
Action = SALE
UDF1 = Shopify Order id (Global order id not the order number)
UDF2 = Order Total
UDF3 = ShopCode set by the cookie.Retrieve from the URL.
If using the SocialLadder script then the customer can use the getSLParameterByName(“SLShopCode”); function.
Else use their own custom code to get the value from the URL.
UDF4 = Units
UDF5 = Discount code if any applied.
UDF7 = Email of the customer who made the purchase.
ITBGUID = Tracking cookie. Retrieve from the URL.
If using the SocialLadder script then the customer can use the getSLParameterByName(“SLTrackCode”); function.
Else use their own custom code to get the value from the URL.
UDF14 = Currency used by the store other than USD.
UDF9 = Any other custom data to send to the SocialLadder system.
NOTE: Refreshing the same page should not fire the pixel again.