Fanplayr Docs

Español

English
日本語
Italiano

Español

English
日本語
Italiano

Appearance

Shopify ​

Es fácil integrarse con tu tienda Shopify. Actualmente aún no estamos disponibles como una aplicación de Shopify, pero hacer que Fanplayr 360 funcione con tu tienda es tan sencillo como copiar y pegar dos fragmentos de código.

Primeros Pasos ​

Para añadir una nueva integración de Shopify:

  • Ve a Integraciones / Catálogo / Web, App y Otros.
  • Haz clic en la integración de Shopify.
  • En Fuentes, haz clic en Añadir en el elemento de seguimiento de eventos del sitio web.
  • Añade un nombre a tu integración de Fuente. Así es como la referenciarás en todo el sistema Fanplayr 360.
  • Haz clic en Guardar.
  • Ahora se generarán y mostrarán una Clave de Escritura y un Endpoint. Los usarás en las instrucciones a continuación, referenciados como WRITE_KEY y ENDPOINT.

No olvides habilitar esta integración una vez que estés listo para usarla con el interruptor en la parte superior derecha de la página.

Seguimiento de Páginas ​

  1. Inicia sesión en el área de administración de tu tienda.
  2. Ve a Tienda Online > Temas.
  3. Haz clic en los 3 puntos y luego en Editar código.

  • Haz clic en theme.liquid

  • Ahora añade el siguiente código cerca de la parte inferior de la página, justo antes de tu etiqueta de cierre </body>.

No olvides reemplazar la WRITE_KEY con la que creaste anteriormente.

javascript
<script>
  (function(t,n){const e=window;let r=e[n];if(!r){r=e[n]=[]}let o=false;try{for(const t of[1]){}crypto.subtle.digest("SHA-256",new ArrayBuffer(0))}catch(t){o=true}if(o){console.log("Fanplayr ignoring old browser");return}const c=["identify","page","track","setConfig","user.set","user.setOnce","user.unset","user.increment"];function s(t){const n=t.split(".");let e=n[0];let o=r;if(n.length===2){o=r[e]=r[e]||{};e=n[1]}o[e]=function(){const n=[t];n.push(...Array.prototype.slice.call(arguments));r.push(n);return r}}for(let t=0;t<c.length;t++){var f=c[t];s(f)}r.init=function(e,o){const c=t.createElement("script");c.type="module";c.async=true;c.dataset["fpLibName"]=n;c.src=typeof FANPLAYR_CUSTOM_LIB_URL!=="undefined"?FANPLAYR_CUSTOM_LIB_URL:"https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js";const s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(c,s);r["_options"]=o;r["_writeKey"]=e;r["_stubVersion"]="1.0.0"};return r})(document,"fp360");

  fp360.init({
    writeKey: "WRITE_KEY",
    endpoint: "ENDPOINT",
    debug: true
  });

{%- assign pageType = "other" -%}
  {%- case template -%}
    {%- when "index" -%}
        {%- assign pageType = "home" -%}
    {%- when "product" -%}
        {%- assign pageType = "product" -%}
    {%- when "collection" -%}
        {% assign pageType = "category" -%}
    {%- when "cart" -%}
        {% assign pageType = "cart" -%}
    {%- when "search" -%}
        {% assign pageType = "search" -%}
    {%- when "blog" -%}
        {%- assign pageType = "blog" -%}
  {%- endcase -%}

  fp360.page({
    type: {{ pageType | json }}
  });

  {% if template == "collection" %}
  (function(){
    var products = [];
    {%- for product in collection.products -%}
    products.push({
      id: {{ product.id | json }},
      name: {{ product.title | json }},
      price: {{ product.price | divided_by: 100 | json }},
      url: new URL({{ product.url | json }}, location).href,
      imageUrl: new URL({{ product.featured_image | img_url | json }}, location).href
    });
    {%- endfor %}
    fp360.track("Product List Viewed", {
      $products: products
    });
  })();
  {% endif %}

  {% if template == "cart" %}
  (function(){
    var products = [];
    {%- for item in cart.items -%}
    products.push({
      id: {{ item.product_id | json }},
      name: {{ item.title | json }},
      price: {{ item.price | divided_by: 100 | json }},
      url: new URL({{ item.url | json }}, location).href,
      imageUrl: {{ item | img_url | json }},
      quantity: {{ item.quantity | json }}
    });
    {%- endfor %}
    fp360.track("Cart Viewed", {
      $cart: {
        currency: "USD",
        products: products
      }
    });
  })();
  {% endif %}

  {% if template == "product" %}
  fp360.track("Product Viewed", {
    $product: {
      id: {{ product.id | json }},
      name: {{ product.title | json }},
      price: {{ product.price | divided_by: 100 | json }},
      url: new URL({{ product.url | json }}, location).href,
      imageUrl: new URL({{ product.featured_image | img_url | json }}, location).href
    }
  });
  {% endif %}
</script>

Página de Confirmación de Pedido ​

  • Haz clic en Configuración en la parte inferior izquierda del administrador de la tienda.

  • Haz clic en Pago y Cuentas

  • Desplázate hasta el campo Página de estado del pedido, donde puedes añadir el siguiente script para rastrear pedidos.

De nuevo, no olvides reemplazar la WRITE_KEY con la que creaste anteriormente.

javascript
<script>
  (function(t,n){const e=window;let r=e[n];if(!r){r=e[n]=[]}let o=false;try{for(const t of[1]){}crypto.subtle.digest("SHA-256",new ArrayBuffer(0))}catch(t){o=true}if(o){console.log("Fanplayr ignoring old browser");return}const c=["identify","page","track","setConfig","user.set","user.setOnce","user.unset","user.increment"];function s(t){const n=t.split(".");let e=n[0];let o=r;if(n.length===2){o=r[e]=r[e]||{};e=n[1]}o[e]=function(){const n=[t];n.push(...Array.prototype.slice.call(arguments));r.push(n);return r}}for(let t=0;t<c.length;t++){var f=c[t];s(f)}r.init=function(e,o){const c=t.createElement("script");c.type="module";c.async=true;c.dataset["fpLibName"]=n;c.src=typeof FANPLAYR_CUSTOM_LIB_URL!=="undefined"?FANPLAYR_CUSTOM_LIB_URL:"https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js";const s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(c,s);r["_options"]=o;r["_writeKey"]=e;r["_stubVersion"]="1.0.0"};return r})(document,"fp360");

  fp360.init({
    writeKey: "WRITE_KEY",
    endpoint: "ENDPOINT",
    debug: true
  });

  fp360.page({
    type: "Order Completed"
  });

  (function() {
    var order_number = {{order.order_number | json}};
    var subtotal_price = parseFloat("{{order.subtotal_price}}") / 100 || 0;
    var total_price = parseFloat("{{order.total_price}}") / 100 || 0;
    var tax_price = parseFloat("{{order.tax_price}}") / 100 || 0;
    var shipping_price = parseFloat("{{order.shipping_price}}") / 100 || 0;
    var discount = parseFloat("{{order.discount}}") / 100 || 0;
    var discountCode = {{discountCode | json}};
    var currency = {{shop.currency | json}};

    var products = [];
{%- for item in order.line_items -%}
    products.push({
      id: {{ item.product_id | json }},
      price: {{ item.price | divided_by: 100 | json }},
      quantity: {{ item.quantity | json }},
      name: {{ item.title | json}},
      url: "//" + window.location.hostname + {{ item.url | json }},
      imageUrl: {{ item | img_url | json }}
    });
    {%- endfor %}

    fp360.track("Order Completed", {
      $order: {
        orderNumber: order_number,
        revenue: subtotal_price,
        discount: discount,
        discountCode: discountCode,
        shipping: shipping_price,
        tax: tax_price,
        currency: currency,
        products: products
      }
    });
  })();
</script>

Copyright © 2011-present Fanplayr Inc