Skip to main content

Shopify Integration

Apple Sepin avatar
Written by Apple Sepin
Updated over 8 months ago

Gain a unified view of your store's performance and enhance your marketing strategy with seamless data synchronization and in-depth analytics.


Shopify Integration

Step 1. Create a Pixel

To initiate event tracking, please follow these steps to create a custom pixel:

- Go to your store management Settings.

- Click on Customer events (Step 1)

- Click on Add custom pixel (Step 2)

- Enter a Pixel Name (e.g., growify-pixel) in the modal window (Step 3)

- Click the Add pixel button to create a pixel. (Step 4)


​Step 2. Setup a Pixel

- Permission: Ensure the Not Required checkbox is selected (Step 5)

- Copy the Custom Pixel Script below and insert in Code section (Step 6)

const GRConfig={storeId:321,pixelVersion:3,pixelFunctioName:"__grp_"};class GRBrowser{static isMobile(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}static userAgent(){return window.navigator.userAgent}}class GRUrl{static getParameterByName(t,e){e||(e=window.location.href);let r=RegExp("[?&]"+(t=t.replace(/[\[\]]/g,"\\$&"))+"(=([^&#]*)|&|#|$)","i").exec(e);return r?r[2]?decodeURIComponent(r[2].replace(/\+/g," ")):"":null}}class Fingerprint{static checksum(t){let e=5381,r=t.length;for(;r--;)e=33*e^t.charCodeAt(r);return e>>>0}static map(t,e){let r=0,i=t.length,o=[];for(;r<i;)o[r]=e(t[r++]);return o}static get(){return Fingerprint.checksum([navigator.userAgent,[screen.height,screen.width,screen.colorDepth].join("x"),new Date().getTimezoneOffset(),!!window.sessionStorage,!!window.localStorage,Fingerprint.map(navigator.plugins,function(t){return[t.name,t.description,Fingerprint.map(t,function(t){return[t.type,t.suffixes].join("~")}).join(",")].join("::")}).join(";")].join("###"))}}class GRHelper{static isPresent(t){return null!=t&&""!==t}static now(){return 1*new Date}static guid(){return GRConfig.pixelVersion+"-xxxxxxxx-".replace(/[x]/g,function(t){let e=36*Math.random()|0;return("x"==t?e:3&e|8).toString(36)})+(1*new Date).toString(36)}static jsonToQueryString(t){return Object.keys(t).map(e=>encodeURIComponent(e)+"="+encodeURIComponent(t[e])).join("&")}static buildPayload(t,e){let{context:r={}}=t,{document:i={},window:o={}}=r,{screen:n={},innerWidth:s=0,innerHeight:a}=o;return{id:GRConfig.storeId,uid:GRCookie.get("uid"),ev:e,ed:"",v:GRConfig.pixelVersion,dl:(i.location||{}).href||"",rl:i.referrer||"",ts:GRHelper.now(),de:i.characterSet||"",sr:n.width+"x"+n.height,vp:s+"x"+a,cd:"",dt:i.title||"",bn:"",md:GRBrowser.isMobile(),ua:GRBrowser.userAgent(),tz:new Date().getTimezoneOffset(),utm_source:GRCookie.getUtm("utm_source"),utm_medium:GRCookie.getUtm("utm_medium"),utm_term:GRCookie.getUtm("utm_term"),utm_content:GRCookie.getUtm("utm_content"),utm_campaign:GRCookie.getUtm("utm_campaign"),utm_adid:GRCookie.getUtm("utm_adid"),utm_source_platform:GRCookie.getUtm("utm_source_platform"),utm_creative_format:GRCookie.getUtm("utm_creative_format"),utm_marketing_tactic:GRCookie.getUtm("utm_marketing_tactic"),gaid:GRCookie.getExternalByKey("_ga"),fbid:GRCookie.getExternalByKey("_fbp"),gr_user_id:Fingerprint.get()}}}class GRCookie{static prefix(){return GRConfig.pixelFunctioName}static set(t,e,r,i="/"){let o="";if(GRHelper.isPresent(r)){let n=new Date;n.setTime(n.getTime()+6e4*r),o="".concat("expires=",n.toGMTString(),"; ")}document.cookie="".concat(this.prefix(),t,"=",e,"; ",o,"path=",i,"; SameSite=Lax")}static get(t){let e="".concat(this.prefix(),t,"="),r=document.cookie.split(";");for(let i=0;i<r.length;i++){let o=r[i];for(;" "==o.charAt(0);)o=o.substring(1);if(0==o.indexOf(e))return o.substring(e.length,o.length)}}static getExternalByKey(t){for(let e of(t+="=",decodeURIComponent(document.cookie).split(";")))if((e=e.trim()).startsWith(t))return e.substring(t.length,e.length);return""}static exists(t){return GRHelper.isPresent(this.get(t))}static setUtms(){let t={utm_source:["gr_source","tw_source","utm_source"],utm_campaign:["gr_campaign","tw_campaign","fbc_id","fb_campaignid","utm_campaign"],utm_medium:["utm_medium"],utm_term:["gr_term","fb_adsetid","utm_term"],utm_content:["gr_content","utm_content"],utm_adid:["gr_gadid","tw_adid","h_ad_id","fb_adid","gr_fbadid","utm_id"]},e=!1;for(let r=0,i=Object.keys(t).length;r<i;r++)for(let o=0,n=t[Object.keys(t)[r]].length;o<n;o++)if(GRHelper.isPresent(GRUrl.getParameterByName(t[Object.keys(t)[r]][o]))){e=!0;break}if(e){let s,a={};for(let u=0,c=Object.keys(t).length;u<c;u++)for(let m=0,l=t[Object.keys(t)[u]].length;m<l;m++)s=GRUrl.getParameterByName(t[Object.keys(t)[u]][m]),GRHelper.isPresent(s)&&(a[Object.keys(t)[u]]=s);this.set("utm",JSON.stringify(a))}}static getUtm(t){if(this.exists("utm"))try{let e=JSON.parse(this.get("utm"));if(t in e)return e[t]}catch(r){}return""}}analytics.subscribe("page_viewed",t=>{GRCookie.exists("uid")?GRCookie.set("uid",GRCookie.get("uid"),1051200):GRCookie.set("uid",GRHelper.guid(),1051200),GRCookie.setUtms();let e=GRHelper.buildPayload(t,"pageload"),r="https://us-central1-growify-346505.cloudfunctions.net/grp?".concat(GRHelper.jsonToQueryString(e));navigator.sendBeacon(r)}),analytics.subscribe("checkout_completed",t=>{let e=[],r=((t.data||{}).checkout||{}).lineItems||[];for(let i of r){let{variant:o={},quantity:n=0,finalLinePrice:s={}}=i||{};e.push({productId:((o||{}).product||{}).id||"",productName:((o||{}).product||{}).title||"",productPrice:((o||{}).price||{}).amount||0,productBrand:((o||{}).price||{}).vendor||"",productQuantity:n||0,purchaseValue:s.amount||0})}let a=(t.data||{}).checkout||{},{order:u={},email:c="",billingAddress:m={},totalTax:l={}}=a,g={orderId:(u||{}).id||"",userId:((u||{}).customer||{}).id||"",userEmail:c||"",userFirstName:m.firstName||"",userLastName:m.lastName||"",tax:l.amount||0,products:e},d=GRHelper.buildPayload(t,"purchase");d.ed=JSON.stringify(g);let p="https://us-central1-growify-346505.cloudfunctions.net/grp?".concat(GRHelper.jsonToQueryString(d));navigator.sendBeacon(p)});

- Click the Save button to validate and update the setup (Step 7)

- If the setup is valid and there are no issues, the Connect button will be active. Please click the Connect button to activate the script and start collecting events (Step 8)

Step 3. Pixel Status

As soon as the Pixel is connected, the Growify starts collecting events. You can check the Pixel status in the status bar (last view and last purchase)

Note: Once the pixel is connected, there may be a delay of 10-15 minutes until the status updates from the moment of receiving the first event.

Did this answer your question?