WooCommerce tracking pixel instructions

when following these steps, some brands' developers have found it helpful to first review the docid\ k bu jeo2sm5 2g7lpo9g and then comparing with the woocommerce specific instructions in this guide this guide will walk you through the steps to install roster's two tracking pixels, both of which are required to enable roster's sales attribution features, such as link tracking and referral commissions google tag manager we strongly discourage installing roster's tracking pixels through google tag manager (gtm) more and more browsers and extensions block gtm from loading, thereby blocking roster's tracking pixels from working we recommend installing roster's tracking pixels directly in your e commerce platform or website's global theme/template step 1 get a public access api token each of the two tracking pixels require a public access token in order to securely send tracking data from a customer's browser to your roster account you can use the same public access token for both tracking pixels log into your roster account go to the api integration page by clicking on your brand's name in the left hand navigation, then integrations > api integration copy the newest public access token if one exists, or click new access token to create a new one never use private access tokens with roster's tracking pixels public access tokens are safe to use in a browser environment, but private access tokens are only intended for server side usage as they allow full access to all roster api endpoints step 2 install the link tracking pixel roster's link tracking pixel tracks link clicks from ambassadors' referral links and stores ambassadors' referral link ids in the browser to track subsequent purchases ensure the person performing the following steps has admin access to your woocommerce account log into your woocommerce account open the editor for header php by navigating to appearance > theme editor > header php paste the following javascript tags just before the closing \</head> tag \<script type="text/javascript"> window\ roster = { config { token 'public access token', forceshareablecodefetch true }, onclicktracked function() { // optional callback see table below for details console log('click tracked'); }, oncoderetrieved function(discountcode) { // optional callback see table below for details console log('discount code ', discountcode); }, onerror function(error) { // optional callback see table below for details console error('roster pixel error ', error); } }; \</script> \<script async type="application/javascript" src="https //cdn rostercdn com/sa js">\</script> replace public access token in the javascript tag with the public access token from step 1 above verify the link trakcing pixel after your have published the changes to your storefront or website, verify that link tracking is working by using an ambassador's referral link from your roster account see docid j9kdlpjtcpdkr6eblfwz to speed up the verification process using roster's chrome browser extension step 3 install the order tracking pixel roster's order tracking pixel is an order aware javascript pixel that needs to be installed on the order confirmation page (the page that loads immediately after a customer completes a purchase ) install the order tracking pixel using one of the following two options refer to this https //woocommerce github io/code reference/classes/wc order html for more details on the wc order object option 1 add tracking to thankyou php (recommended) we recommended adding the order tracking pixel directly to the thankyou php file based on feedback from other brands using woocommerce open your theme's thankyou php file in an editor locate your theme's thankyou php file if using a default theme, it is usually be found here wp content/plugins/woocommerce/templates/checkout/thankyou php if using a custom woocommerce theme, it is usually be found here /themes/your custom theme/woocommerce/checkout/thankyou php locate the following line of code in thankyou php \<?php do action( 'woocommerce thankyou', $order >get id() ); ?> paste the following javascript tag just below the line of code you found in the previous step \<! roster order submission start > \<script type='application/javascript'> function submitorder() { if (sattribution) { var totalprice = \<?php echo $order >get subtotal(); ?>; var discount total = \<?php echo $order >get total discount(); ?> ?? 0; var subtotal = totalprice discount total; sattribution set({ orderid "\<?php echo $order >get id(); ?>", orderdate "\<?php echo $order >get date created(); ?>", discountcodes \<?php echo json encode($order >get coupon codes()); ?>, currency "\<?php echo $order >get currency(); ?>", subtotalprice subtotal, totalprice \<?php echo $order >get total(); ?>, firstname "\<?php echo $order >get billing first name(); ?>", lastname "\<?php echo $order >get billing last name(); ?>", email "\<?php echo $order >get billing email(); ?>" }); sattribution emitorder(); } } var sascript = document createelement("script"); sascript addeventlistener("load", submitorder); sascript src = "https //sa getroster com/sa js?token=public access token"; document body appendchild(sascript); \</script> \<! roster order submission end > replace public access token in the javascript tag with the public access token from step 1 above option 2 add tracking to functions php with this option, you will add the order tracking pixel to functions php log into your woocommerce account open the editor for functions php by navigating to appearance > theme editor > functions php if using a custom theme, ensure the custom theme is selected in the select theme to edit dropdown back up the current functions php by copying and pasting it into an editor on your desktop and saving it for future reference paste the following php code at the end of functions php / add roster analytics code to the thank you page ref https //docs woocommerce com/wc apidocs/class wc order html / add action( 'woocommerce thankyou', 'roster attribution' ); function roster attribution( $order id ) { $order = wc get order( $order id ); if ( $order ) { $usedcoupons = json encode($order >get used coupons()); echo "\<! roster order submission start > \<script type='application/javascript'> function submitorder() { if (sattribution) { var totalprice = {$order >get subtotal()}; var discount total = {$order >get total discount()} ?? 0; var subtotal = totalprice discount total; sattribution set({ orderid \\"{$order id}\\", orderdate \\"{$order >get date created()}\\", discountcodes {$usedcoupons}, currency \\"{$order >get currency()}\\", subtotalprice subtotal, totalprice {$order >get total()}, firstname \\"{$order >get billing first name()}\\", lastname \\"{$order >get billing last name()}\\", email \\"{$order >get billing email()}\\" }); sattribution emitorder(); } } var sascript = document createelement(\\"script\\"); sascript addeventlistener(\\"load\\", submitorder); sascript src = \\"https //sa getroster com/sa js?token=access token\\"; document body appendchild(sascript ); \</script> \<! roster order submission end >"; } } replace access token in the javascript tag with the public access token from step 1 above step 4 verify the installation process it's imperative that you test the link tracking and order tracking upon completing the above steps see docid\ hszdrydoq2cmtkv8cxbwp for a video walkthrough and detailed steps and docid j9kdlpjtcpdkr6eblfwz event reference for link tracking pixel callback signature description oncoderetrieved function(discountcode) called when a discount code is successfully returned from roster's shareable 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 shareable endpoint request or a callback error is caught error is a string or error object describing what went wrong config reference for link tracking pixel 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 adding hidden products to product rewards, contact us at mailto\ support\@getroster com