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 obtener 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 utilizando control de versiones para el origen de tu sitio web. Si este es el caso, la actualización de la plantilla utilizando el administrador de Shopify podría provocar la pérdida del seguimiento de Fanplayr 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 y no haya impacto en la velocidad de la página. Ten en cuenta que implementarlo en el encabezado o 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 la plantilla de tu tema ​

  • Inicia sesión en el área de administración de tu tienda Shopify
  • Ve a Tienda online / Temas

  • Haz clic en "..." y elige Editar 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 la 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 - Legado ​

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

  • Ve a Configuración / Pagos
  • Desplázate hasta Procesamiento de pedidos y busca la casilla Scripts adicionales.

  • 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 pago (Checkout Extensibility) ​

El seguimiento de pedidos se activará como un Píxel Personalizado.

  1. Navega a Configuración.
  2. Luego navega a Eventos de cliente.
  3. Haz clic en Añadir píxel personalizado y nómbralo "Seguimiento de pedidos de Fanplayr".
  4. Establece el Permiso como No requerido.
  5. Establece la Venta de datos como Los datos recopilados no califican como venta de datos.
  6. Copia y pega el código JavaScript a continuación en el editor de Código. Asegúrate de actualizar las variables ACCOUNT_KEY y STORE_DOMAIN en el código con los valores proporcionados por Fanplayr.
  7. Guarda el nuevo Píxel personalizado.
  8. Habilita el píxel haciendo clic en Conectar.
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 ​

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 los descuentos que hayan acumulado durante su visita, y les ayuda a aplicar el descuento.

Cómo encontrar la plantilla de tu tema ​

  • Inicia sesión en el área de administración de tu tienda Shopify
  • Ve a Tienda online / Temas

  • Haz clic en "..." y elige Editar 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 la 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