This guide will show you how to install the Triple Pixel to your supported 3rd-party Checkout.

To ensure that the Triple Pixel records visitor activity and properly attributes it to your Shopify purchases, access must have already been granted via your Triple Whale dashboard to connect with your Shopify account. To read more on how to do that, see here.


You should use this guide if you have a 3rd-party checkout solution that sends data to Shopify for order processing. We have verified some popular checkout apps and ensured Triple Whale supports them. If you don't find your checkout solution in the list below, please contact the Customer Support team.

What you’ll need to begin

  • Access to the checkout solution settings to paste a snippet of JavaScript code.

  • 5 minutes.

Supported Checkout solutions


Better Cart

1. Open the Better Cart app within your Shopify store. Click the "Settings" button from the left-side navigation menu then scroll down to "Custom Scripts".

2. Click Create Custom Script button on the right side of the screen. You will then be presented with a modal where you can select where the script will be placed as well as the area to paste your custom scripts.

3. Select "Thank You Page" in the dropdown, enter a Name (something you would recognize, e.g. "Thank you page")

4. Copy and paste the code presented below. Replace REPLACE_THIS.myshopify.com with your MyShopify domain name.

<script> TripleHeadless = 'REPLACE_THIS.myshopify.com' </script>
<script async src="https://triplewhale-pixel.web.app/triplepx.js"></script>
<script>
~function(W,H,A,L,E,_){if(L=window,!L[H+"sn"]){L[H+"sn"]=1;try{A.setItem(H,1+(0|A.getItem(H)||0)),W.includes("⇈")&&A.setItem(H+"Stg",1+(0|A.getItem(H+"Stg")||0)),(E=JSON.parse(A.getItem(H+"U")||"[]")).push(location.href),A.setItem(H+"U",JSON.stringify(E))}catch(e){}A.getItem('"!nC`')||(A=L,A[H]||(L=function(){return Date.now().toString(36)+"_"+Math.random().toString(36)},E=A[H]=function(t,e){return W=L(),(E._q=E._q||[]).push([W,t,e]),E._headless=!0,W},E.ch=W))}}("","TriplePixel",localStorage);

~function TP(){
const email = window?.bcData?.order?.customer?.email;
if(!email||!window.TriplePixel){setTimeout(TP, 400); return;}
TriplePixel("Contact", {email:email});
}()
</script>


Recharge (custom checkout)

The Recharge app has two checkout solutions - a Shopify one (default for anyone signing up with Recharge since 2020) and a custom Recharge one.

Triple Whale automatically supports the Shopify Recharge checkout. The below solution is ONLY for the custom Recharge checkout.

1. Click Storefront in your merchant portal and select Checkout.

2. Enter the code below in the Thank you page text box. Replace REPLACE_THIS.myshopify.com with your MyShopify domain name.

3. Click Save.

Checkout___Settings___Recharge_2021-12-05_19-58-16.png
<script> TripleHeadless = 'REPLACE_THIS.myshopify.com' </script>
<script async src="https://triplewhale-pixel.web.app/triplepx.js"></script>
<script>
~function(W,H,A,L,E,_){if(L=window,!L[H+"sn"]){L[H+"sn"]=1;try{A.setItem(H,1+(0|A.getItem(H)||0)),W.includes("⇈")&&A.setItem(H+"Stg",1+(0|A.getItem(H+"Stg")||0)),(E=JSON.parse(A.getItem(H+"U")||"[]")).push(location.href),A.setItem(H+"U",JSON.stringify(E))}catch(e){}A.getItem('"!nC`')||(A=L,A[H]||(L=function(){return Date.now().toString(36)+"_"+Math.random().toString(36)},E=A[H]=function(t,e){return W=L(),(E._q=E._q||[]).push([W,t,e]),E._headless=!0,W},E.ch=W))}}("","TriplePixel",localStorage);

~function TP() {
const email = '{{email}}';
if(!email||!window.TriplePixel){setTimeout(TP, 400); return;}
TriplePixel("Contact", {email:email});
}()
</script>


Checkify

Go to https://admin.checkify.pro/admin/advanced-settings/scripts

  1. Select the desired type: Script in header.

  2. Choose the page (destination) where you want to add the script: Only for Thank You page.

  3. Give the script a name by filling Script title.

  4. Enter the code in the field below. Replace REPLACE_THIS.myshopify.com with your MyShopify domain name.

  5. Click Save changes.

<script> TripleHeadless = 'REPLACE_THIS.myshopify.com' </script>
<script async src="https://triplewhale-pixel.web.app/triplepx.js"></script>
<script>
~function(W,H,A,L,E,_){if(L=window,!L[H+"sn"]){L[H+"sn"]=1;try{A.setItem(H,1+(0|A.getItem(H)||0)),W.includes("⇈")&&A.setItem(H+"Stg",1+(0|A.getItem(H+"Stg")||0)),(E=JSON.parse(A.getItem(H+"U")||"[]")).push(location.href),A.setItem(H+"U",JSON.stringify(E))}catch(e){}A.getItem('"!nC`')||(A=L,A[H]||(L=function(){return Date.now().toString(36)+"_"+Math.random().toString(36)},E=A[H]=function(t,e){return W=L(),(E._q=E._q||[]).push([W,t,e]),E._headless=!0,W},E.ch=W))}}("","TriplePixel",localStorage);

~function TP() {
const email = window?.__NEXT_DATA__?.props?.pageProps?.thankYouPageData?.userData?.contactInformation?.email || window?.enhanced_conversion_data?.email;
if(!email||!window.TriplePixel){setTimeout(TP, 400); return;}
TriplePixel("Contact", {email:email});
}()
</script>
Did this answer your question?