Shopify

It is quick and simple to integrate Fanplayr into your Shopify store. Simply add the provided templates (adding your Fanplayr Account Key) in your header or footer, and your conversion script, and you're done.

For details on the implementation please see the Custom Integration guide.

User Tracking

Note: If you do not normally update templates yourself, please give these details to your developer. They may be using version control for the source of your website. If this is the case, updating the template using Shopify admin may lead to Fanplayr tracking being lost when your site is updated by the developer.

The user tracking script can be entered in either the header or footer of the site. We suggest putting it in the footer so your site content is loaded and there is no impact on page speed. Note that implementing it in either the header or footer should not significantly impact page speed as the Fanplayr script loads asynchronously.

Finding your theme template

• Log in to your Shopify store admin area

• Go to Online Store / Themes

• Click the "..." and choose Edit HTML/CSS.

• Choose the theme.liquid template

Add the tracking template

Add the following to your theme.liquid and save the file. We suggest adding it just before your closing </body> tag.

Note: You must replace the ACCOUNT_KEY and LOADER_URL with the information provided by Fanplayr.

<script>
(function(d, w, s) {
  {%- assign pageType = 'page' -%}
  {%- case template -%}
    {%- when 'index' -%}
       {%- assign pageType = 'home' -%}
    {%- when 'product' -%}
       {%- assign pageType = 'prod' -%}
    {%- when 'collection' -%}
       {% assign pageType = 'cat' -%}
    {%- when 'cart' -%}
       {% assign pageType = 'cart' -%}
    {%- when 'search' -%}
       {% assign pageType = 'srch' -%}
    {%- when 'blog' -%}
       {%- assign pageType = 'blog' -%}
  {%- endcase -%}
  {%- assign lineItemCount = 0 -%}
  {%- assign numItems = 0 -%}
  {% assign subTotal = 0 %}

  var items = [];
  {%- for item in cart.items -%}
    {%- assign lineItemCount = lineItemCount | plus: 1 -%}
    {%- assign numItems = numItems | plus: item.quantity -%}
    {%- assign lineItemPrice = item.price | times: item.quantity -%}
    {%- assign subTotal = subTotal | plus: lineItemPrice -%};
    items.push({
      id: "{{ item.product_id }}",
      sku: "{{ item.sku }}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
      price: {{ item.price }} / 100 || 0, qty: {{ item.quantity }},
      name: "{{ item.title }}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
      qty: "{{ item.quantity }}",
      url: "//" + window.location.hostname + "{{ item.url }}",
      image: "{{ item | img_url }}"
    });

  {%- endfor -%}

  var f = w.fanplayr = w.fanplayr || { _i:[] };
  f._i.push({
    version: 3,
    accountKey: 'ACCOUNT_KEY',
    allowOfferPrompt: false,
    applyToCartUrl: '/discount/%c?redirect=' + window.location.pathname + window.location.search + '#FP_COUPON_APPLIED',
    data: {
      lineItemCount: {{ lineItemCount }},
      numItems: {{ numItems }},
      subTotal: parseFloat('{{ subTotal }}') / 100 || 0,
      total: parseFloat('{{ subTotal }}') / 100 || 0,
      discount: 0,
      discountCode: '',
      pageType: '{{ pageType }}',
      categoryId: '{{ collection.id | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
      categoryName: '{{ collection.title | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
      productId: '{{ product.id | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
      productName: '{{ product.title | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
      productSku: '{{ product.sku | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
      productPrice: parseFloat('{{ product.price }}') / 100 || 0,
      productUrl: '//' + window.location.hostname + '{{ product.url }}',
      productImage: '{{ product.featured_image | img_url }}',
      currency: '{{ shop.currency }}',
      products : items,
      cartAction: 'override'
   }
  });
  var js = d.createElement(s);
  var fjs = d.getElementsByTagName(s)[0];
  js.async = true;
  js.src = 'LOADER_URL';
  fjs.parentNode.insertBefore(js, fjs);
})(document, window, 'script');
</script>

Order Tracking - Legacy

The order script is added to your order complete page in your settings.

• Go to Settings / Checkout

• Scroll down to Order Processing and find the Additional Scripts box

• Add the following script and save.

Note: You must replace the ACCOUNT_KEY and LOADER_URL with the information provided by Fanplayr. You also need to replace the STORE_DOMAIN with the domain of your store.

<script>

{%- assign discount = 0 -%}
{%- assign discountCode = '' -%}
{%- for discount in order.discounts -%}
  {%- assign discount = discount | plus: discount.savings -%}
  {%- assign discountCode = discountCode | append: discount.code -%}
  {%- assign discountCode = discountCode | append: ',' -%}
{%- endfor -%}

(function(d, w, s) {

  var items = [];
  {%- for item in order.line_items -%}
  items.push({
    id: "{{ item.product_id }}",
    sku: "{{ item.sku }}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
    price: {{ item.price }} / 100 || 0,
    qty: {{ item.quantity }},
    name: "{{ item.title}}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
    url: "//" + window.location.hostname + "{{ item.url }}",
    image: "{{ item | img_url }}"
  });
  {%- endfor -%}

  if ( !w.fp_sales_orders ) {
    w.fp_sales_orders = {
      version: 3,
      accountKey: 'ACCOUNT_KEY',
      storeDomain: 'STORE_DOMAIN',
      data: {
        orderId: '{{ order.order_number }}',
        orderNumber: '{{ order.order_number }}',
        subTotal: (parseFloat('{{ order.total_price }}') / 100 || 0) - (parseFloat('{{ order.tax_price }}') / 100 || 0) - (parseFloat('{{ order.shipping_price }}') / 100 || 0) + (Math.abs(parseFloat('{{ discount }}') / 100 || 0)),
        total: parseFloat('{{ order.subtotal_price }}') / 100 || 0,
        discount: Math.abs(parseFloat('{{ discount }}') / 100 || 0),
        discountCode: '{{ discountCode | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'").substr(0, '{{ discountCode | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'").length - 1),
        shipping: parseFloat('{{ order.shipping_price }}') / 100 || 0,
        tax: parseFloat('{{ order.tax_price }}') / 100 || 0,
        currency: '{{ shop.currency }}',
        orderEmail: '{{ order.email | replace: "'", "&#39;" }}'.replace(/&quot;/g, "'").replace(/&#39;/g, "'"),
        firstName: '{{ order.customer.first_name | replace: "'", "&#39;" }}'.replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
        lastName: '{{ order.customer.last_name | replace: "'", "&#39;" }}'.replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
        customerEmail: '{{ order.customer.email| replace: "'", "&#39;" }}'.replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
        customerId: '{{ order.customer.id }}',
        products: items,
        cartAction: 'override'
      }
    };
    var js = d.createElement(s);
    var fjs = d.getElementsByTagName(s)[0];
    js.async = true;
    js.src = 'LOADER_URL';
    fjs.parentNode.insertBefore(js, fjs);
  }
})(document, window, 'script');
</script>

Order Tracking - Checkout Extensibility

The order tracking will be activated as Custom Pixel.

• Go to Settings / Custom Events

• Click Add Custom Pixel and name it as "Fanplayr Order Tracking"

• Set the permission as "Not Required"

• Add the script you will find below in the Code text are

• Save the new Custom Pixel

• Connect the pixel to the store by clicking Connect

Note: You must replace the ACCOUNT_KEY with the information provided by Fanplayr. You also need to replace the STORE_DOMAIN with the domain of your store.

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;

  const allDiscountCodes = checkout.discountApplications.filter((discount) => discount.type === 'DISCOUNT_CODE' || discount.type === 'MANUAL').map((discount) => discount.title);

  var products = [];

  for (var i = 0; i < checkout.lineItems.length; i++) {
    var prod = checkout.lineItems[i];
    products.push({
      id: prod.id,
      sku: prod.id,
      price: parseFloat((prod.finalLinePrice.amount / prod.quantity).toFixed(2)),
      qty: prod.quantity,
      name: prod.title
    });
  }

  window.fanplayr = {
    allowInFrame: true
  };

  window.fp_sales_orders = {
    version: 3,
    accountKey: 'ACCOUNT_KEY',
    storeDomain: 'STORE_DOMAIN',
    data: {
      orderId: checkout.order.id,
      orderNumber: checkout.order.id,
      gross: checkout.subtotalPrice.amount,
      discount: checkout.discountsAmount.amount,
      discountCode: allDiscountCodes.join(','),
      shipping: checkout.shippingLine.price.amount,
      tax: checkout.totalTax.amount,
      currency: checkout.currencyCode,
      products: products,
      cartAction: 'override',
    }
  };
  
  var js = document.createElement('script');
  var fjs = document.getElementsByTagName('script')[0];
  js.async = true;
  js.src = 'https://cdn.fanplayr.com/client/production/fp_custom_orders.js';
  fjs.parentNode.insertBefore(js, fjs);
});

Shopify Plus Checkout

If you have a Shopify Plus account you can add the Fanplayr widget to your checkout. This helps to remind your users of any discounts that they collected during their visit, and helps them apply the discount.

Finding your theme template

• Log in to your Shopify store admin area

• Go to Online Store / Themes

• Click the "..." and choose Edit HTML/CSS.

• Choose the checkout.liquid template

Add the tracking template

Add the following to your checkout.liquid and save the file. It MUST be added just before your closing </body> tag.

Note: You must replace the ACCOUNT_KEY and LOADER_URL with the information provided by Fanplayr. You also need to replace the STORE_DOMAIN with the domain of your store.

<script>
(function(d, w, s) {
  var f = w.fanplayr = w.fanplayr || { _i:[] };

  var noDiscountApplied = true;
  var spans = document.getElementsByTagName('span');
  for ( var i in spans ) {
    if ( !spans[i].getAttribute ) {
      continue;
    }
    var attr = spans[i].getAttribute('data-checkout-discount-amount-target');
    if ( attr ) {
      noDiscountApplied = false;
    }
  }

  var checkForCouponApplication = function() {
    var m = window.location.hash.match(/coupon=([^&]+)/);
    if ( m && m.length == 2 ) {
        window.location.hash = '';
          var el = document.getElementById('checkout_reduction_code');
          if ( el ) {
            el.value = m[1];
            var btn = el.parentNode.parentNode.getElementsByTagName('button');
            if ( btn.length ) {
              btn[0].removeAttribute('disabled');
              btn[0].click();
            }
          }
    }
  };
  var couponInterval = setInterval(checkForCouponApplication, 100);

  f._i.push({
    version: 3,
    accountKey: 'ACCOUNT_KEY',
    storeDomain: 'STORE_DOMAIN',
        applyToCartUrl: '#coupon=%c',
        allowOfferPrompt: noDiscountApplied,
    data: {
      pageType: 'checkout',
      currency: '{{ shop.currency }}',
      cartAction: 'repeat'
    }
  });
  var js = d.createElement(s);
  var fjs = d.getElementsByTagName(s)[0];
  js.async = true;
  js.src = 'LOADER_URL';
  fjs.parentNode.insertBefore(js, fjs);
})(document, window, 'script');
</script>