Add leakproof codes to smart links (Shopify Headless)

roster's tracking pixel includes an event system that lets brands subscribe to javascript callbacks when a discount code is retrieved from an ambassador's referral link this is for headless shopify stores that need to apply discount codes through their own cart or session mechanism if you're a standard shopify store, roster applies discount codes automatically see add leakproof codes to smart links (shopify) docid\ j mbkk2ngpbae53e0pdva instead how it works when a customer clicks an ambassador's referral link, they land on the brand's storefront where roster's tracking pixel fires on page load the pixel calls roster's discount endpoint to retrieve a single use leakproof code associated with the ambassador's link that was clicked if a code is returned, the pixel fires the oncoderetrieved callback on the window\ roster object the brand's storefront code receives the discount code in the callback and applies it through their own cart mechanism — for example, by injecting it into a session, adding it to a cart api request, or setting a discount code cookie prerequisites roster's tracking pixel has been installed on your storefront or website see pixel tracking installation docid 8lvuc9wqsxlirhykmp53k to get the correct install instructions for your store or website you have set up smart links for the desired program(s) see set up smart links docid\ ambvb at8xje4wy49t9pe for detailed instructions confirm that the pixel you installed is pointing to cdn rostercdn com/sa js if you see any other value (e g sa getroster com/sa js ) then you are not using our most recent pixel and need to use the cdn version instead integration steps set up smart links for the program see set up smart links docid\ ambvb at8xje4wy49t9pe enable leakproof codes as the smart link's customer discount open the customer discount section of smart link settings select leakproof codes as the discount click save enable discount code fetching in the tracking pixel in your storefront or website frontend code where you installed the roster tracking pixel, add forceshareablecodefetch true to the window\ roster config object (see javascript snippet below) this will trigger roster's tracking pixel to attempt to create a one time user discount code when a link click is emitted define your event callbacks in your store frontend add an event handler for the oncoderetrieved event, which gets called when a leakproof code is returned the event handler you define will be responsible for adding the discount code to the customer's cart for example, if the code roster akn12age is returned, then your handler will add that discount code to the customer's cart such that will automatically be applied during checkout add the following script block demonstrates what your window\ roster object should look like the onclicktracked callback is optional \<script type="text/javascript"> window\ roster = { config { token 'your public access token', forceshareablecodefetch true }, oncoderetrieved function(discountcode) { console log('discount code ', discountcode); // replace this with your own logic to apply the code to the cart }, onclicktracked function() { console log('click tracked'); }, onerror function(error) { console error('roster pixel error ', error); } }; \</script> \<script async type="application/javascript" src="https //cdn rostercdn com/sa js">\</script> this script block must appear before the roster pixel script tag in your html if it appears after, the callbacks will not be registered when the pixel fires download our roster pixel event tester html file to see how the events fire with one of your own ambassador's referral links simply edit the file with your brand's public access token and paste in a link to see how the event callbacks work test the integration once you have implemented the callbacks on your storefront or website and pushed the changes live, use an ambassador's referral link on your store to verify that the leakproof code is fetched from roster, your event handler is called, and the discount code is applied to the shopping cart see verify installation with roster's chrome extension docid j9kdlpjtcpdkr6eblfwz to speed up the verification process using roster's chrome browser extension event reference callback signature description oncoderetrieved function(discountcode) called when a discount code is successfully returned from roster's discount code endpoint discountcode is a string containing the code to apply onclicktracked function(click) called when a referral click is tracked by the pixel click is an object containing click details such as referrallinkid , landingpageurl , referrerurl , queryparams , utmparams , useragent , linksource , linkvariant , characterset , title , location , externalid , and clicktimestamp onerror function(error) called when an error occurs during the discount code endpoint request or a callback error is caught error is a string or error object describing what went wrong config reference property type default description token string "" your public access api token required forceshareablecodefetch boolean false set to true to enable discount code retrieval on non shopify storefronts required for this integration need help? if you have any questions about integrating roster's pixel event system, contact us at support\@getroster com mailto\ support\@getroster com