Verada Docs

Shopify ​

Integrare Verada nel tuo negozio Shopify è facile e veloce. Ti basta aggiungere i template forniti (inserendo la tua Chiave Account Verada) nell'header o nel footer, e il tuo script di conversione, e il gioco è fatto.

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

Monitoraggio Utenti ​

Nota: Se normalmente non aggiorni i template autonomamente, fornisci questi dettagli al tuo sviluppatore. Potrebbe utilizzare un controllo versione per il codice sorgente del tuo sito web. In questo caso, l'aggiornamento del template tramite l'amministrazione di Shopify potrebbe comportare la perdita del tracciamento di Verada quando il tuo sito viene aggiornato dallo sviluppatore.

Lo script di monitoraggio utenti può essere inserito sia nell'header che nel footer del sito. Suggeriamo di posizionarlo nel footer in modo che il contenuto del sito venga caricato prima e non ci sia impatto sulla velocità della pagina. Si noti che l'implementazione nell'header o nel footer non dovrebbe avere un impatto significativo sulla velocità della pagina poiché lo script Verada 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 su "..." e scegli Modifica HTML/CSS.

  • Scegli il template theme.liquid

Aggiungere il template di tracciamento ​

Aggiungi quanto segue al tuo theme.liquid e salva il file. Suggeriamo di aggiungerlo subito prima del tag di chiusura </body>.

Nota: Devi sostituire ACCOUNT_KEY e LOADER_URL con le informazioni fornite da 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>

Monitoraggio dell'Estensibilità del Checkout ​

Il tracciamento del checkout e degli ordini verrà attivato come Custom Pixel.

  1. Naviga su Impostazioni.
  2. Quindi naviga su Eventi del cliente.
  3. Clicca su Aggiungi Custom Pixel e chiamalo "Verada Checkout Extensibility".
  4. Imposta la Autorizzazione su Non richiesta.
  5. Imposta la Vendita di dati su I dati raccolti non si qualificano come vendita di dati.
  6. Copia e incolla il codice JavaScript sottostante nell'editor Codice. Assicurati di aggiornare le variabili ACCOUNT_KEY, STORE_DOMAIN e LOADER_URL nel codice con i valori forniti da Verada.
  7. Salva il nuovo Custom Pixel.
  8. Abilita il pixel cliccando su Connetti.
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);
    });
});

Monitoraggio Ordini - Legacy ​

Lo script per gli ordini 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 lo script seguente e salva.

Nota: Devi sostituire ACCOUNT_KEY e LOADER_URL con le informazioni fornite da Verada. 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>

Checkout Shopify Plus - Legacy ​

Se hai un account Shopify Plus, puoi aggiungere il widget Verada al tuo checkout. Questo aiuta a ricordare agli utenti gli eventuali sconti raccolti 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 su "..." e scegli Modifica HTML/CSS.

  • Scegli il template checkout.liquid

Aggiungere il template di tracciamento ​

Aggiungi quanto segue al tuo checkout.liquid e salva il file. DEVE essere aggiunto subito prima del tag di chiusura </body>.

Nota: Devi sostituire ACCOUNT_KEY e LOADER_URL con le informazioni fornite da Verada. 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 Verada