Fanplayr Docs

Italiano

English
日本語
Español

Italiano

English
日本語
Español

Appearance

Shopify ​

Integrare Fanplayr nel tuo negozio Shopify è semplice e veloce. Ti basterà aggiungere i modelli forniti (inserendo la tua Chiave Account Fanplayr) nell'intestazione o nel piè di pagina, e il tuo script di conversione, e il gioco è fatto.

Per dettagli sull'implementazione, consulta la guida all'integrazione personalizzata.

Monitoraggio Utenti ​

Nota: Se normalmente non aggiorni i modelli da solo/a, per favore fornisci questi dettagli al tuo sviluppatore. Potrebbe utilizzare il controllo di versione per la sorgente del tuo sito web. In tal caso, l'aggiornamento del modello tramite l'amministrazione Shopify potrebbe comportare la perdita del tracciamento Fanplayr quando il tuo sito viene aggiornato dallo sviluppatore.

Lo script di monitoraggio utenti può essere inserito nell'intestazione o nel piè di pagina del sito. Suggeriamo di inserirlo nel piè di pagina in modo che il contenuto del sito venga caricato e non ci sia impatto sulla velocità della pagina. Si noti che l'implementazione nell'intestazione o nel piè di pagina non dovrebbe influire in modo significativo sulla velocità della pagina poiché lo script Fanplayr si carica in modo asincrono.

Trovare il modello del tuo tema ​

  • Accedi all'area di amministrazione del tuo negozio Shopify
  • Vai a Negozio Online / Temi

  • Clicca su "..." e scegli Modifica HTML/CSS.

  • Scegli il modello theme.liquid

Aggiungere il modello di tracciamento ​

Aggiungi quanto segue al tuo theme.liquid e salva il file. Suggeriamo di aggiungerlo subito prima del tag di chiusura </body>.

Nota: Devi sostituire ACCOUNT_KEY e LOADER_URL con le informazioni fornite da 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>

Monitoraggio Ordini - Legacy ​

Lo script dell'ordine viene aggiunto alla pagina di completamento dell'ordine nelle tue impostazioni.

  • Vai a Impostazioni / Checkout
  • Scorri verso il basso fino a Elaborazione Ordini e trova la casella Script Aggiuntivi

  • Aggiungi il seguente script e salva.

Nota: Devi sostituire ACCOUNT_KEY e LOADER_URL con le informazioni fornite da Fanplayr. Devi anche sostituire STORE_DOMAIN con il dominio del tuo negozio.

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>

Monitoraggio Ordini - Checkout Extensibility ​

Il monitoraggio degli ordini sarà attivato come Custom Pixel.

  • Vai a Impostazioni / Eventi personalizzati
  • Clicca su Aggiungi Custom Pixel e chiamalo "Fanplayr Order Tracking"
  • Imposta il permesso come "Non richiesto"
  • Aggiungi lo script che troverai di seguito nell'area di testo Codice
  • Salva il nuovo Custom Pixel
  • Collega il pixel al negozio cliccando su Connetti

Nota: Devi sostituire ACCOUNT_KEY con le informazioni fornite da Fanplayr. Devi anche sostituire STORE_DOMAIN con il dominio del tuo negozio.

javascript
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);
});

Checkout Shopify Plus ​

Se possiedi un account Shopify Plus, puoi aggiungere il widget Fanplayr al tuo checkout. Questo aiuta a ricordare ai tuoi utenti eventuali sconti che hanno raccolto durante la loro visita e li aiuta ad applicare lo sconto.

Trovare il modello del tuo tema ​

  • Accedi all'area di amministrazione del tuo negozio Shopify
  • Vai a Negozio Online / Temi

  • Clicca su "..." e scegli Modifica HTML/CSS.

  • Scegli il modello checkout.liquid

Aggiungere il modello di tracciamento ​

Aggiungi quanto segue al tuo checkout.liquid e salva il file. DEVE essere aggiunto subito prima del tag di chiusura </body>.

Nota: Devi sostituire ACCOUNT_KEY e LOADER_URL con le informazioni fornite da Fanplayr. Devi anche sostituire STORE_DOMAIN con il dominio del tuo negozio.

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