Update liquid file names, provide new checkout tracking pixel

checkout-pixel.js

@@ -0,0 +1,99 @@
+function bloomreachSDK(){
+    if(typeof exponea == "undefined"){
+      !function(e,n,t,i,o,r){function s(e){if("number"!=typeof e)return e;const n=new Date;return new Date(n.getTime()+1e3*e)}const c=4e3,a="xnpe_async_hide";function p(e){return e.reduce((function(e,n){return e[n]=function(){e._.push([n.toString(),arguments])},e}),{_:[]})}function m(e,n,t){const i=t.createElement(n);i.src=e;const o=t.getElementsByTagName(n)[0];return o.parentNode.insertBefore(i,o),i}function l(e){return"[object Date]"===Object.prototype.toString.call(e)}r.target=r.target||"https://api.exponea.com",r.file_path=r.file_path||r.target+"/js/exponea.min.js",o[n]=p(["anonymize","initialize","identify","getSegments","update","track","trackLink","trackEnhancedEcommerce","getHtml","showHtml","showBanner","showWebLayer","ping","getAbTest","loadDependency","getRecommendation","reloadWebLayers","_preInitialize","_initializeConfig"]),o[n].notifications=p(["isAvailable","isSubscribed","subscribe","unsubscribe"]),o[n].segments=p(["subscribe"]),o[n].snippetVersion="v3.0.0",function(e,n,t){e[n]["_"+t]={},e[n]["_"+t].nowFn=Date.now,e[n]["_"+t].snippetStartTime=e[n]["_"+t].nowFn()}(o,n,"performance"),function(e,n,t,i,o,r){e[o]={sdk:e[i],sdkObjectName:i,skipExperiments:!!t.new_experiments,sign:t.token+"/"+(r.exec(n.cookie)||["","new"])[1],path:t.target}}(o,e,r,n,i,RegExp("__exponea_etc__"+"=([\w-]+)")),function(e,n,t){m(e.file_path,n,t)}(r,t,e),function(e,n,t,i,o,r,p){if(!e.new_experiments)return;true===e.new_experiments&&(e.new_experiments={});const u=e.new_experiments.hide_class||a,_=e.new_experiments.timeout||c,f=encodeURIComponent(r.location.href.split("#")[0]);let d;e.cookies&&e.cookies.expires&&("number"==typeof e.cookies.expires||l(e.cookies.expires)?d=s(e.cookies.expires):e.cookies.expires.tracking&&("number"==typeof e.cookies.expires.tracking||l(e.cookies.expires.tracking))&&(d=s(e.cookies.expires.tracking))),d&&d<new Date&&(d=void 0);const g=e.target+"/webxp/"+n+"/"+r[t].sign+"/modifications.min.js?http-referer="+f+"&timeout="+_+"ms"+(d?"&cookie-expires="+Math.floor(d.getTime()/1e3):"");"sync"===e.new_experiments.mode&&r.localStorage.getItem("__exponea__sync_modifications__")?function(e,n,t,i,o){t[o][n]="<"+n+' src="'+e+'"></'+n+">",i.writeln(t[o][n]),i.writeln("<"+n+">!"+o+".init && document.writeln("+o+"."+n+'.replace("/'+n+'/", "/'+n+'-async/").replace("><", " async><"))</'+n+">")}(g,n,r,p,t):function(e,n,t,i,o,r,s,c){r.documentElement.classList.add(e);const a=m(t,i,r);function p(){o[c].init||m(t.replace("/"+i+"/","/"+i+"-async/"),i,r)}function l(){r.documentElement.classList.remove(e)}a.onload=p,a.onerror=p,o.setTimeout(l,n),o[s]._revealPage=l}(u,_,g,n,r,p,o,t)}(r,t,i,0,n,o,e),function(e,n,t){var i;e[n]._initializeConfig(t),(null===(i=t.experimental)||void 0===i?void 0:i.non_personalized_weblayers)&&e[n]._preInitialize(t),e[n].start=function(i){i&&Object.keys(i).forEach((e=>t[e]=i[e])),e[n].initialize(t)}}(o,n,r)}(document,"exponea","script","webxpClient",window,{
+            target: "<<PROJECT API_ENDPOINT>>",
+            token: "<<PROJECT TOKEN>>",
+            experimental: {
+                non_personalized_weblayers: true
+            },
+            track: {
+                google_analytics: false,
+            },
+        });
+
+        delete window.indexedDB;
+
+        const getCookie = function (cname) {
+              var name = cname + "=";
+              var ca = document.cookie.split(";");
+              for (var i = 0; i < ca.length; i++) {
+                  var c = ca[i];
+                  while (c.charAt(0) == " ") {
+                      c = c.substring(1);
+                  }
+                  if (c.indexOf(name) == 0) {
+                      return c.substring(name.length, c.length);
+                  }
+              }
+              return undefined;
+          };
+          var cus = {};
+          var cart_id = getCookie("cart"); //default Shopify cookie name is "cart"
+          if (cart_id) cus.cart_id = cart_id;
+          /* if (customer && customer.email){
+            cus.email_id = customer.email | json;
+            cus.shopify_id = customer.id | json;
+          }*/
+          exponea.start({
+              "customer": cus,
+              "track": {
+                  "visits": true,
+                  "default_properties": { "domain": "<<SHOPIFY DOMAIN>>" } // domain attribute 
+              }
+          });
+      }
+    console.log("pixel running"); //to remove
+  }
+  analytics.subscribe("checkout_started", async (event) => {
+      let data = event.data.checkout;
+      bloomreachSDK();
+      exponea.track("checkout", {
+          "step_title": "checkout_started",
+          "shipping_city": data.shippingAddress.city || "",
+          "shipping_country": data.shippingAddress.country || "",
+          "total_price": data.totalPrice.amount || "",
+          "currency": data.currencyCode
+      })
+  });
+  analytics.subscribe("checkout_address_info_submitted", async (event) => {
+      let data = event.data.checkout;
+      bloomreachSDK();
+      exponea.track("checkout", {
+          "step_title": "shipping_information",
+          "shipping_city": data.shippingAddress.city || "",
+          "shipping_country": data.shippingAddress.country || "",
+          "total_price": data.totalPrice.amount || "",
+          "currency": data.currencyCode
+      })
+  });
+  analytics.subscribe("checkout_completed", async (event) => {
+      let data = event.data.checkout;
+      bloomreachSDK();
+      exponea.track("checkout", {
+          "step_title": "checkout_completed",
+          "shipping_city": data.shippingAddress.city || "",
+          "shipping_country": data.shippingAddress.country || "",
+          "total_price": data.totalPrice.amount || "",
+          "currency": data.currencyCode
+      })
+  });
+  analytics.subscribe("checkout_contact_info_submitted", async (event) => {
+      let data = event.data.checkout;
+
+      console.log(data);
+
+      if (data.email || data.phone) bloomreachSDK();
+
+      if(data.email)
+          exponea.identify({
+              email_id: data.email
+          },
+          {
+              email: data.email
+          })
+      if (data.phone) {
+          exponea.update({
+              phone: data.phone
+          })
+      }
+  });

readme.md

@@ -1,25 +1,42 @@
 # Shopify Front-end integration for Exponea
 
-This repository contains .liquid snippets that can enable standardized front-end tracking of e-commerce events on your Shopify Plus website.
+This repository contains .liquid snippets that enable standardized front-end tracking of e-commerce events on your Shopify Plus website.
+
 ## Installation
 
 You need to copy each .liquid snippet to the respective .liquid file in your Shopify theme.
 
-1. Go to your Shopify admin panel > Online Store > Themes > Actions > Edit Code
-2. Find the respective files: `product.liquid`, `collection.liquid`, and `search.liquid` and copy and paste the contents of each of the respective snippets from this repository to the top of the file. Make sure to maintain the valid syntax of HTML (e.g. paste the files inside the contents of `<head>` rather than outside.
-3. Copy and paste the contents of the `theme.liquid snippet` from this repository to the end of the `<head>` tag of the theme.liquid file in Shopify. Replace the initialization configuration of the file (i.e. replace the configuration object `<<PROJECT TOKEN>>`, `<<CART_COOKIE_NAME>>` and `<<PROJECT API_ENDPOINT>>` with values for your website - see below for more information). Note that the `<<PROJECT API_ENDPOINT>>` also needs to be changed on line 2 - SDK loading script.
-4. Copy and paste the contents of the `checkout.liquid` snippet from this repository to the end of the `<head>` tag of the `checkout.liquid` file in Shopify. Replace the initialization configuration of the file with the configuration that you have received in the email with set-up instructions (i.e. replace the configuration object `<<PROJECT TOKEN>>`, `<<CART_COOKIE_NAME>>` and `<<PROJECT API_ENDPOINT>>` with values for your website - see below for more information). Note that the `<<PROJECT API_ENDPOINT>>` also needs to be changed on line 2 - SDK loading script.
-5. Save the theme and Exponea will initialize automatically.
+1. Go to your Shopify Admin Panel > Online Store > Themes > Actions > Edit Code
+
+2. Find the respective files: `main-product.liquid`, `main-collection-product-grid.liquid`, and `main-search.liquid` and copy and paste the contents of each of the respective snippets from this repository to the top of the file. Make sure to maintain the valid syntax of HTML: paste the files inside the contents of `<head>`. If there are no `<head>` tags present in your liquid file, you can add them yourself at the top of the file.
+
+3. Copy and paste the contents of the `theme.liquid` snippet from this repository to the end of the `<head>` tag of the `theme.liquid` file in Shopify. Replace the placeholders `<<PROJECT API_ENDPOINT>>`, `<<PROJECT TOKEN>>` and `<<CART_COOKIE_NAME>>` - see below for more information on what these values should be.
+
+> [!WARNING]
+> `checkout.liquid` is deprecated. Use the `checkout-pixel.js` instructions outlined in step 4 and skip step 5. For stores which have not yet upgraded, skip to step 5. More information can be found [here](https://shopify.dev/docs/themes/architecture/layouts/checkout-liquid). 
+
+4. To track your checkout flow, you need to create a Shopify pixel. To do this, go to Shopify Admin Panel > Settings > Customer events > Add custom pixel. Call it something descriptive, such as `bloomreach-checkout-pixel`, then copy the contents of `checkout-pixel.js` in this repository. You need to update the placeholder values `<<PROJECT API_ENDPOINT>>`, `<<PROJECT TOKEN>>` and `<<SHOPIFY DOMAIN>>`. Click Save and then Connect.
+
+> [!CAUTION]
+> Only follow step 5 if you are using `checkout.liquid` in your Shopify theme.
+
+5. Copy and paste the contents of the `checkout.liquid` snippet from this repository to the end of the `<head>` tag of the `checkout.liquid` file in Shopify. Replace the placeholders `<<PROJECT API_ENDPOINT>>` and `<<PROJECT TOKEN>>`.
+
+6. Save your theme.
 
 Note on placeholder fields:
-`<<CART_COOKIE_NAME>>` - this is the name of the cart cookie from Shopify, most commonly called "cart".
-`<<PROJECT API_ENDPOINT>>` - this can be found in your Exponea project settings, most commonly "https://api.exponea.com"
-`<<PROJECT TOKEN>>` - this can be found in your Exponea project settings
+
+- `<<CART_COOKIE_NAME>>` - this is the name of the cart cookie from Shopify, most commonly called "cart".
+- `<<PROJECT API_ENDPOINT>>` - this can be found in your Exponea project settings, most commonly "https://api.exponea.com"
+- `<<PROJECT TOKEN>>` - this can be found in your Exponea project settings
+- `<<SHOPIFY DOMAIN>>` - this is your store's URL, such as `650302-4.myshopify.com`, `guitar-store.com` etc.
+
 If you're unsure about any of the values above, please ask your Consultant / CSM for advice.
 
 ## Usage
 
-Once the theme changes are saved, Exponea will initialize and start tracking the front-end events automatically.
+Once the theme changes are saved, Exponea will initialize and start tracking front-end events.
+
 The following events are tracked:
 - `session_start`
 - `session_end`