Fanplayr Docs

English

日本語
Español
Italiano

English

日本語
Español
Italiano

Appearance

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.

html
<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.

html
<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.

  1. Navigate to Settings.
  2. Then navigate to Customer Events.
  3. Click Add Custom Pixel and name it as "Fanplayr Order Tracking".
  4. Set the Permission as Not Required.
  5. Set the Data sale as Data collected does not qualify as data sale.
  6. Copy and paste the JavaScript code below into the Code editor. Be sure to update the ACCOUNT_KEY and STORE_DOMAIN variables in the code with values provided by Fanplayr.
  7. Save the new Custom Pixel.
  8. Enable the pixel by clicking Connect.
js
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);

  const resolveUrl = (url) => {
    return new URL(
      url,
      event.context?.document?.location?.origin ?? document.location.origin
    ).toString();
  };

  const products = [];
  let discountTotal = 0;
  for (const item of checkout.lineItems) {
    const product = {
      id: item.variant?.product?.id,
      sku: item.variant?.sku,
      name: item.title,
      price: item.variant?.price?.amount,
      qty: item.quantity ?? 1,
      url: resolveUrl(item.variant?.product?.url),
      image: item.variant?.image?.src
    };
    if (item.discountAllocations) {
      for (const entry of item.discountAllocations) {
        discountTotal += entry?.amount?.amount ?? 0;
      }
    }
    products.push(product);
  }
  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.totalPrice?.amount ?? 0) + discountTotal,
      discount: discountTotal,
      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.

html
<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>

Copyright © 2011-present Fanplayr Inc