Shopify

Adding your data capture snippet to your checkout flow

Basic Shopify, Shopify and Advanced Shopify merchants do not have access to modify the checkout flow. This flow will not be captured in your sessions. As a workaround, we recommend adding a /thank-you page after your checkout flow to see whether users make it all the way through your checkout flow.

Shopify Plus merchants can add your data capture snippet directly to your checkout.liquid file. After doing so, newly indexed sessions should contain your entire checkout flow. 

Adding your data capture snippet to your Order Status page

Basic Shopify, Shopify and Advanced Shopify merchants can add your data capture snippet to your Order Status page by including it in your Additional Scripts section under Settings > Checkout. You can add the snippet in the Checkout settings of your store.

The below sample code can be copied into the additional scripts field. (Be sure to update your org ID from the default text when implementing.) This script will load FullStory on the Order Status page and fire a custom event when the page is loaded so you have visibility into customers that reach the end of the checkout flow.

<script>
window['_fs_host'] = 'fullstory.com';
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
window['_fs_org'] = '{{YOUR_ORG_ID}}';
window['_fs_namespace'] = 'FS';
(function(m,n,e,t,l,o,g,y){
    if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
    g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
    o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
    y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
    g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
    g.anonymize=function(){g.identify(!!0)};
    g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
    g.log = function(a,b){g("log",[a,b])};
    g.consent=function(a){g("consent",!arguments.length||a)};
    g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
    g.clearUserCookie=function(){};
    g.setVars=function(n, p){g('setVars',[n,p]);};
    g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
    if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
    g._v="1.3.0";
})(window,document,window['_fs_namespace'],'script','user');
</script>

<script>
  // Function to call FS.event when the page is loaded
  function sendFullStoryEvent() {
    function _fs() { return window[window['_fs_namespace']]; }
    // Check if FullStory is loaded and available
    if (typeof _fs() === 'function') {
      _fs().event('Shopify Order Status Page Viewed', {
        // You can include any additional event properties as key-value pairs
        // Example: 'property1': 'value1', 'property2': 'value2'
      },'shopify');
    }
  }

  // Attach the sendFullStoryEvent function to the window load event
  if (window.addEventListener) {
    window.addEventListener('load', sendFullStoryEvent, false);
  } else if (window.attachEvent) {
    window.attachEvent('onload', sendFullStoryEvent);
  }
</script>