How Do I Install the Pixel?
A. For Shopify Implementation
The pixel needs to be implemented in 2 places:
1. On all layouts:
Copy the Pixel Layout Snippet and log into your Shopify account.
Go to: Sales channel, Online store > Themes > Actions > Edit Code
Paste it on all layouts within all the 'head' tags, preferably at the beginning of the heads. The pixel will be most effective if it's the first in the head section.
"Checkout.liquid" layout doesn't need the pixel installed.
2. On the Thank You page:
Copy the Pixel Thank You Snippet and log in to your Shopify account.
Go to: Settings > Checkout
Scroll down to the bottom of the page where it says "Order status page, Additional Scripts" and paste the script, preferably at the top.
3. On the Post-purchase page (Upsells):
If you have a post-purchase app that uses Shopify's Upsell page, you will have the "Post-purchase page" section on the Settings > Checkout page.
Copy the Upsell page pixel script and log in to your Shopify account.
Go to: Settings > Checkout
Scroll down to the bottom of the page where it says "Post-purchase page, Additional Scripts" and paste the Post-purchase Upsell Snippet, preferably at the top.
B. For Google Tag Manager Implementation
Step 1: ALL page views
Create a new tag
Choose "Custom HTML"
Paste the Triple Pixel HTML (double-check that the code begins with <script> and ends with </script>)
Choose "All Page Views" trigger
Name Tag and Save
Step 2: Thank you page
Create a new tag
Choose "Custom HTML"
Paste the Triple Pixel Thank You Snippet (double-check that the code begins with <script> and ends with </script>)
Choose a page view trigger that fires when the customer lands on your thank you page
Name Tag and Save
Step 3: Edit the Additional Scripts section of your Shopify settings
Option 1 (recommended): Place the Triple Pixel Thank You snippet of code in the Additional Scripts section found in your shopify store settings (settings > Checkout > order status page)
Option 2: Place your Google Tag Manager script that fires the "Thank You" snippet from step 2 in the additional scripts section (Found by visiting Settings > Checkout > Order Status Page)
C. For External Extension Apps Users
If you use any extension apps, please manually embed the pixel snippet in your extension app, preferably as high as possible within the 'head' of the page. Please take a look at the Headless instructions for details.
CODE
Pixel Layout Snippet
Replace <TRIPLE_NAME> with your MyShopify domain.
window.TriplePixelData={TripleName:"<TRIPLE_NAME>",ver:"1.9.0"},function(W,H,A,L,E,_,B,N){function O(U,T,P,H,R){void 0===R&&(R=!1),H=new XMLHttpRequest,P?(H.open("POST",U,!0),H.setRequestHeader("Content-Type","application/json")):H.open("GET",U,!0),H.send(JSON.stringify(P||{})),H.onreadystatechange=function(){4===H.readyState&&200===H.status?(R=H.responseText,U.includes(".txt")?eval(R):P||(N[B]=R)):(299<H.status||H.status<200)&&T&&!R&&(R=!0,O(U,T-1))}}if(N=window,!N[H+"sn"]){N[H+"sn"]=1;try{A.setItem(H,1+(0|A.getItem(H)||0)),(E=JSON.parse(A.getItem(H+"U")||"[]")).push(location.href),A.setItem(H+"U",JSON.stringify(E))}catch(e){}var i,m,p;A.getItem('"!nC\`')||(_=A,A=N,A[H]||(L=function(){return Date.now().toString(36)+"_"+Math.random().toString(36)},E=A[H]=function(t,e){return"State"==t?E.s:(W=L(),(E._q=E._q||[]).push([W,t,e]),W)},E.s="Installed",E._q=[],E.ch=W,B="configSecurityConfModel",N[B]=1,O("https://conf.config-security.com/model",5),i=L(),m=A[atob("c2NyZWVu")],_.setItem("di_pmt_wt",i),p={id:i,action:"profile",avatar:_.getItem("auth-security_rand_salt_"),time:m[atob("d2lkdGg=")]+":"+m[atob("aGVpZ2h0")],host:A.TriplePixelData.TripleName,url:window.location.href,ref:document.referrer,ver:window.TriplePixelData.ver},O("https://api.config-security.com/",5,p),O("https://triplewhale-pixel.web.app/dot1.9.txt",5)))}}("","TriplePixel",localStorage);
Pixel Thank You Snippet
<script src='https://triplewhale-pixel.web.app/dot1.9.js'></script>
Pixel Post-purchase Upsell Snippet
Replace <TRIPLE_NAME> with your MyShopify domain.
<link rel='preconnect dns-prefetch' href='https://triplewhale-pixel.web.app/' crossorigin />
<link rel='preconnect dns-prefetch' href='https://api.config-security.com/' crossorigin />
<link rel='preconnect dns-prefetch' href='https://conf.config-security.com/' crossorigin />
<script>
/* >> TriplePixel :: start*/
window.TriplePixelData={TripleName:"<TRIPLE_NAME>",ver:"1.9.0"},function(W,H,A,L,E,_,B,N){function O(U,T,P,H,R){void 0===R&&(R=!1),H=new XMLHttpRequest,P?(H.open("POST",U,!0),H.setRequestHeader("Content-Type","application/json")):H.open("GET",U,!0),H.send(JSON.stringify(P||{})),H.onreadystatechange=function(){4===H.readyState&&200===H.status?(R=H.responseText,U.includes(".txt")?eval(R):P||(N[B]=R)):(299<H.status||H.status<200)&&T&&!R&&(R=!0,O(U,T-1))}}if(N=window,!N[H+"sn"]){N[H+"sn"]=1;try{A.setItem(H,1+(0|A.getItem(H)||0)),(E=JSON.parse(A.getItem(H+"U")||"[]")).push(location.href),A.setItem(H+"U",JSON.stringify(E))}catch(e){}var i,m,p;A.getItem('"!nC\`')||(_=A,A=N,A[H]||(L=function(){return Date.now().toString(36)+"_"+Math.random().toString(36)},E=A[H]=function(t,e){return"State"==t?E.s:(W=L(),(E._q=E._q||[]).push([W,t,e]),W)},E.s="Installed",E._q=[],E.ch=W,B="configSecurityConfModel",N[B]=1,O("https://conf.config-security.com/model",5),i=L(),m=A[atob("c2NyZWVu")],_.setItem("di_pmt_wt",i),p={id:i,action:"profile",avatar:_.getItem("auth-security_rand_salt_"),time:m[atob("d2lkdGg=")]+":"+m[atob("aGVpZ2h0")],host:A.TriplePixelData.TripleName,url:window.location.href,ref:document.referrer,ver:window.TriplePixelData.ver},O("https://api.config-security.com/",5,p),O("https://triplewhale-pixel.web.app/dot1.9.txt",5)))}}("","TriplePixel",localStorage);
/* << TriplePixel :: end*/
</script>
<script>
~function TP(){
const email = window.Shopify?.order?.customer?.email;
if(!email||!window.TriplePixel){setTimeout(TP, 400); return;}
TriplePixel('Contact', {email:email});
}()
</script>
Contact founders-dash@triplewhale.com with any questions.