Integrating Fanplayr into your Shopify Store

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 with the account key 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 = 'https://d1q7pknmpq2wkm.cloudfront.net/js/my.fanplayr.com/fp_smart.js?' + (new Date().getTime());
  fjs.parentNode.insertBefore(js, fjs);
})(document, window, 'script');
</script>

Order Tracking

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 with the account key 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 = 'https://d1q7pknmpq2wkm.cloudfront.net/js/my.fanplayr.com/fp_custom_orders.js?' + (new Date().getTime());
    fjs.parentNode.insertBefore(js, fjs);
  }
})(document, window, 'script');
</script>

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 with the account key 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 = 'https://d1q7pknmpq2wkm.cloudfront.net/js/my.fanplayr.com/fp_smart.js?' + (new Date().getTime());
  fjs.parentNode.insertBefore(js, fjs);
})(document, window, 'script');
</script>

Introduction

Integrating Fanplayr into your Shopify Store

User Tracking

Finding your theme template

Add the tracking template

Order Tracking

Shopify Plus Checkout

Finding your theme template

Add the tracking template

results matching ""

No results matching ""