Verada Docs

Shopify ​

Integrar Verada en tu tienda Shopify es rápido y sencillo. Simplemente añade las plantillas proporcionadas (añadiendo tu clave de cuenta de Verada) en tu cabecera 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 utilizando control de versiones para el código fuente de tu sitio web. Si este es el caso, la actualización de la plantilla utilizando la administración de Shopify puede llevar a que el seguimiento de Verada se pierda cuando tu sitio sea actualizado por el desarrollador.

El script de seguimiento de usuarios puede introducirse en la cabecera o 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 la cabecera o en el pie de página no debería afectar significativamente la velocidad de la página, ya que el script de Verada 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 archivo theme.liquid y guárdalo. 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 Verada.

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 extensibilidad del proceso de pago ​

El seguimiento del proceso de pago y del pedido se activará como un Píxel Personalizado.

  1. Ve a Configuración.
  2. Luego navega a Eventos del cliente.
  3. Haz clic en Añadir Píxel Personalizado y nómbralo como "Verada Checkout Extensibility".
  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, STORE_DOMAIN y LOADER_URL en el código con los valores proporcionados por Verada.
  7. Guarda el nuevo Píxel Personalizado.
  8. Habilita el píxel haciendo clic en Conectar.
js
const accountKey = "ACCOUNT_KEY";
const storeDomain = "STORE_DOMAIN";
const loaderUrl = "LOADER_URL";

analytics.subscribe('all_standard_events', (event) => {

    if (!event?.name || !event?.data?.checkout) {
        return;
    }

    if (!document.getElementById("fpShopifyCheckout")) {
        const script = document.createElement("script");
        script.id = "fpShopifyCheckout";
        script.src = "https://cdn.fanplayr.com/customers/shopify/shopify_checkout.js";
        script.async = true;
        script.dataset.accountKey = accountKey;
        script.dataset.storeDomain = storeDomain;
        script.dataset.loaderUrl = loaderUrl;
        document.head.appendChild(script);
    }

    window.fpShopifyCheckoutOnReady = window.fpShopifyCheckoutOnReady || [];

    window.fpShopifyCheckoutOnReady.push(fpShopifyCheckout => {
        fpShopifyCheckout.trackEvent(event);
    });
});

Seguimiento de pedidos - Legado ​

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

  • Ve a Configuración / Proceso de pago
  • 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 Verada. 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>

Proceso de pago de Shopify Plus - Legado ​

Si tienes una cuenta Shopify Plus, puedes añadir el widget de Verada 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 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 archivo 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 Verada. 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 Verada