Fanplayr Docs

Italiano

English
日本語
Español

Italiano

English
日本語
Español

Appearance

Shopify ​

Integrare Fanplayr nel tuo negozio Shopify è rapido e semplice. È sufficiente aggiungere i template forniti (inserendo la tua Account Key Fanplayr) nell'header o nel footer, e il tuo script di conversione, e il gioco è fatto.

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

Monitoraggio Utenti ​

Nota: Se normalmente non aggiorni i template personalmente, fornisci questi dettagli al tuo sviluppatore. Potrebbero utilizzare un sistema di controllo versione per il codice sorgente del tuo sito web. In tal caso, l'aggiornamento del template tramite l'amministrazione di Shopify potrebbe causare la perdita del monitoraggio di Fanplayr quando il tuo sito viene aggiornato dallo sviluppatore.

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

Trovare il template del tuo tema ​

  • Accedi all'area di amministrazione del tuo negozio Shopify
  • Vai su Negozio online / Temi

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

  • Scegli il template theme.liquid\

Aggiungi il template di monitoraggio ​

Aggiungi quanto segue al tuo theme.liquid e salva il file. Suggeriamo di aggiungerlo appena 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 su Impostazioni / Checkout
  • Scorri 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 verrà attivato come Custom Pixel.

  1. Vai su Impostazioni.
  2. Poi vai su Eventi cliente.
  3. Clicca su Aggiungi pixel personalizzato e nominalo "Fanplayr Order Tracking".
  4. Imposta il Permesso su Non richiesto.
  5. Imposta la Vendita di dati su I dati raccolti non si qualificano come vendita di dati.
  6. Copia e incolla il codice JavaScript qui sotto nell'editor Codice. Assicurati di aggiornare le variabili ACCOUNT_KEY e STORE_DOMAIN nel codice con i valori forniti da Fanplayr.
  7. Salva il nuovo Pixel personalizzato.
  8. Abilita il pixel cliccando su Connetti.
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);
});

Checkout Shopify Plus ​

Se hai 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 template del tuo tema ​

  • Accedi all'area di amministrazione del tuo negozio Shopify
  • Vai su Negozio online / Temi

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

  • Scegli il template checkout.liquid

Aggiungi il template di monitoraggio ​

Aggiungi quanto segue al tuo checkout.liquid e salva il file. Deve ASSOLUTAMENTE essere aggiunto appena 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