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.
Don't forget to enable this integration once you are ready to use it with the switch at the top right of the page.
Copy < 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 >
Copy < 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 > 
