Fanplayr Docs

Español

English
日本語
Italiano

Español

English
日本語
Italiano

Appearance

Shopify ​

Integrar Fanplayr en tu tienda Shopify es rápido y sencillo. Simplemente añade las plantillas proporcionadas (añadiendo tu clave de cuenta de Fanplayr) en tu encabezado o pie de página, y tu script de conversión, y listo.

Para más detalles sobre la implementación, consulta la Guía de integración personalizada.

Seguimiento de usuarios ​

Nota: Si normalmente no actualizas las plantillas tú mismo, por favor, proporciona estos detalles a tu desarrollador. Es posible que estén usando control de versiones para la fuente de tu sitio web. Si este es el caso, la actualización de la plantilla usando el administrador de Shopify podría hacer que el seguimiento de Fanplayr se pierda cuando tu sitio sea actualizado por el desarrollador.

El script de seguimiento de usuarios puede introducirse tanto en el encabezado como en el pie de página del sitio. Sugerimos colocarlo en el pie de página para que el contenido de tu sitio se cargue primero y no haya impacto en la velocidad de la página. Ten en cuenta que implementarlo tanto en el encabezado como en el pie de página no debería afectar significativamente la velocidad de la página, ya que el script de Fanplayr se carga asincrónicamente.

Cómo encontrar tu plantilla de tema ​

  • Inicia sesión en el área de administración de tu tienda Shopify
  • Ve a Online Store / Themes

  • Haz clic en "..." y elige Edit HTML/CSS.

  • Elige la plantilla theme.liquid

Añadir la plantilla de seguimiento ​

Añade lo siguiente a tu theme.liquid y guarda el archivo. Sugerimos añadirlo justo antes de tu etiqueta de cierre </body>.

Nota: Debes reemplazar ACCOUNT_KEY y LOADER_URL con la información proporcionada por 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>

Seguimiento de pedidos - Heredado ​

El script de pedido se añade a la página de finalización de pedido en tu configuración.

  • Ve a Settings / Checkout
  • Desplázate hacia abajo hasta Order Processing y busca el cuadro Additional Scripts

  • Añade el siguiente script y guarda.

Nota: Debes reemplazar ACCOUNT_KEY y LOADER_URL con la información proporcionada por Fanplayr. También necesitas reemplazar STORE_DOMAIN con el dominio de tu tienda.

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>

Seguimiento de pedidos - Extensibilidad de Checkout ​

El seguimiento de pedidos se activará como Custom Pixel.

  • Ve a Settings / Custom Events
  • Haz clic en Add Custom Pixel y nómbralo como "Fanplayr Order Tracking"
  • Establece el permiso como "Not Required"
  • Añade el script que encontrarás a continuación en el área de texto Code
  • Guarda el nuevo Custom Pixel
  • Conecta el pixel a la tienda haciendo clic en Connect

Nota: Debes reemplazar ACCOUNT_KEY con la información proporcionada por Fanplayr. También necesitas reemplazar STORE_DOMAIN con el dominio de tu tienda.

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 de Shopify Plus ​

Si tienes una cuenta de Shopify Plus, puedes añadir el widget de Fanplayr a tu proceso de pago. Esto ayuda a recordar a tus usuarios cualquier descuento que hayan recogido durante su visita, y les ayuda a aplicar el descuento.

Cómo encontrar tu plantilla de tema ​

  • Inicia sesión en el área de administración de tu tienda Shopify
  • Ve a Online Store / Themes

  • Haz clic en "..." y elige Edit HTML/CSS.

  • Elige la plantilla checkout.liquid

Añadir la plantilla de seguimiento ​

Añade lo siguiente a tu checkout.liquid y guarda el archivo. DEBE añadirse justo antes de tu etiqueta de cierre </body>.

Nota: Debes reemplazar ACCOUNT_KEY y LOADER_URL con la información proporcionada por Fanplayr. También necesitas reemplazar STORE_DOMAIN con el dominio de tu tienda.

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