Shopify

It's easy to integrate with your Shopify store. Right now we are not yet available as a Shopify App, but getting Fanplayr 360 working with your store is as easy as copying and pasting two code snippets.

Getting Started

To add a new Shopify integration:

  • Go to Integrations / Catalog / Web, App and Other.

  • Click on the Shopify integration.

  • Under Sources, click Add on the Track website event item.

  • Add a name to your Source integration. This is how you will reference it throughout the Fanplayr 360 system.

  • Click Save.

  • A Write Key and Endpoint will now be generated and displayed. You will use this these in the in the instructions below, referenced as WRITE_KEY and ENDPOINT.

Don't forget to enable this integration once you are ready to use it with the switch at the top right of the page.

Page Tracking

  1. Log in to your store admin area.

  2. Go to Online Store > Themes.

  3. Click on the 3 dots, and then on Edit Code.

  • Click the theme.liquid

  • Now add the following code near the bottom of the page just before your closing </body> tag.

Don't forget to replace the WRITE_KEY with the one you created earlier.

<script>
  (function(t,n){const e=window;let r=e[n];if(!r){r=e[n]=[]}let o=false;try{for(const t of[1]){}crypto.subtle.digest("SHA-256",new ArrayBuffer(0))}catch(t){o=true}if(o){console.log("Fanplayr ignoring old browser");return}const c=["identify","page","track","setConfig","user.set","user.setOnce","user.unset","user.increment"];function s(t){const n=t.split(".");let e=n[0];let o=r;if(n.length===2){o=r[e]=r[e]||{};e=n[1]}o[e]=function(){const n=[t];n.push(...Array.prototype.slice.call(arguments));r.push(n);return r}}for(let t=0;t<c.length;t++){var f=c[t];s(f)}r.init=function(e,o){const c=t.createElement("script");c.type="module";c.async=true;c.dataset["fpLibName"]=n;c.src=typeof FANPLAYR_CUSTOM_LIB_URL!=="undefined"?FANPLAYR_CUSTOM_LIB_URL:"https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js";const s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(c,s);r["_options"]=o;r["_writeKey"]=e;r["_stubVersion"]="1.0.0"};return r})(document,"fp360");
  
  fp360.init({
    writeKey: "WRITE_KEY",
    endpoint: "ENDPOINT",
    debug: true
  });

  {%- assign pageType = "other" -%}
  {%- case template -%}
    {%- when "index" -%}
        {%- assign pageType = "home" -%}
    {%- when "product" -%}
        {%- assign pageType = "product" -%}
    {%- when "collection" -%}
        {% assign pageType = "category" -%}
    {%- when "cart" -%}
        {% assign pageType = "cart" -%}
    {%- when "search" -%}
        {% assign pageType = "search" -%}
    {%- when "blog" -%}
        {%- assign pageType = "blog" -%}
  {%- endcase -%}

  fp360.page({
    type: {{ pageType | json }}
  });

  {% if template == "collection" %}
  (function(){
    var products = [];
    {%- for product in collection.products -%}
    products.push({
      id: {{ product.id | json }},
      name: {{ product.title | json }},
      price: {{ product.price | divided_by: 100 | json }},
      url: new URL({{ product.url | json }}, location).href,
      imageUrl: new URL({{ product.featured_image | img_url | json }}, location).href
    });
    {%- endfor %}
    fp360.track("Product List Viewed", {
      $products: products
    });
  })();
  {% endif %}

  {% if template == "cart" %}
  (function(){
    var products = [];
    {%- for item in cart.items -%}
    products.push({
      id: {{ item.product_id | json }},
      name: {{ item.title | json }},
      price: {{ item.price | divided_by: 100 | json }},
      url: new URL({{ item.url | json }}, location).href,
      imageUrl: {{ item | img_url | json }},
      quantity: {{ item.quantity | json }}
    });
    {%- endfor %}
    fp360.track("Cart Viewed", {
      $cart: {
        currency: "USD",
        products: products
      }
    });
  })();
  {% endif %}

  {% if template == "product" %}
  fp360.track("Product Viewed", {
    $product: {
      id: {{ product.id | json }},
      name: {{ product.title | json }},
      price: {{ product.price | divided_by: 100 | json }},
      url: new URL({{ product.url | json }}, location).href,
      imageUrl: new URL({{ product.featured_image | img_url | json }}, location).href
    }
  });
  {% endif %}
</script>

Order Confirmation Page

  • Click Settings at the bottom left of the store admin

  • Click Checkout and Accounts

  • Scroll down to the Order status page input, where you can add the following script to track orders.

Again, don't forget to replace the WRITE_KEY with the one you created earlier.

<script>
  (function(t,n){const e=window;let r=e[n];if(!r){r=e[n]=[]}let o=false;try{for(const t of[1]){}crypto.subtle.digest("SHA-256",new ArrayBuffer(0))}catch(t){o=true}if(o){console.log("Fanplayr ignoring old browser");return}const c=["identify","page","track","setConfig","user.set","user.setOnce","user.unset","user.increment"];function s(t){const n=t.split(".");let e=n[0];let o=r;if(n.length===2){o=r[e]=r[e]||{};e=n[1]}o[e]=function(){const n=[t];n.push(...Array.prototype.slice.call(arguments));r.push(n);return r}}for(let t=0;t<c.length;t++){var f=c[t];s(f)}r.init=function(e,o){const c=t.createElement("script");c.type="module";c.async=true;c.dataset["fpLibName"]=n;c.src=typeof FANPLAYR_CUSTOM_LIB_URL!=="undefined"?FANPLAYR_CUSTOM_LIB_URL:"https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js";const s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(c,s);r["_options"]=o;r["_writeKey"]=e;r["_stubVersion"]="1.0.0"};return r})(document,"fp360");

  fp360.init({
    writeKey: "WRITE_KEY",
    endpoint: "ENDPOINT",
    debug: true
  });

  fp360.page({
    type: "Order Completed"
  });

  (function() {
    var order_number = {{order.order_number | json}};
    var subtotal_price = parseFloat("{{order.subtotal_price}}") / 100 || 0;
    var total_price = parseFloat("{{order.total_price}}") / 100 || 0;
    var tax_price = parseFloat("{{order.tax_price}}") / 100 || 0;
    var shipping_price = parseFloat("{{order.shipping_price}}") / 100 || 0;
    var discount = parseFloat("{{order.discount}}") / 100 || 0;
    var discountCode = {{discountCode | json}};
    var currency = {{shop.currency | json}};

    var products = [];
    {%- for item in order.line_items -%}
    products.push({
      id: {{ item.product_id | json }},
      price: {{ item.price | divided_by: 100 | json }},
      quantity: {{ item.quantity | json }},
      name: {{ item.title | json}},
      url: "//" + window.location.hostname + {{ item.url | json }},
      imageUrl: {{ item | img_url | json }}
    });
    {%- endfor %}

    fp360.track("Order Completed", {
      $order: {
        orderNumber: order_number,
        revenue: subtotal_price,
        discount: discount,
        discountCode: discountCode,
        shipping: shipping_price,
        tax: tax_price,
        currency: currency,
        products: products
      }
    });
  })();
</script>

PreviousSFTP - SSH Key AuthenticationNextSlack

Last updated