Instellen van Ordertracking

Binnen Logivert Equinoxe kan gebruik gemaakt worden van Ordertracking voor het bijhouden van de conversie van de webwinkel.

In toekomstige builds zullen de benodigde scripts automatisch geïnjecteerd worden in de template, indien gebruik ervan is ingesteld in de Backoffice; voor nu geldt dat de winkelier nog enkele Ordertrackingcodes zelf in de backoffice moet opgeven.

Stap voor Stap

Instellen in LogiVert

1. Zorg ervoor dat je gebruik maakt van de allerlaatste Logivert-build. Tenminste LogiVert 7.3.2.12 is vereist voor Ordertracking onder Logivert Equinoxe.
2. Zorg ervoor dat je gebruik maakt van de standaard "base.html.twig" die wordt meegeleverd met de Equinoxe-build. Indien er voor een template aanpassingen zijn gemaakt aan base.html.twig, dan is het mogelijk dat de Ordertracking niet naar behoren werkt. Zie het kopje "Aangepaste Basetemplate" verderop voor instructie hoe een aangepaste template bijgewerkt kan worden.

3. In de Backoffice, controleer onder Eigenschappen → Instellingen → Webwinkel → Bestelproces of de Ordertrackingcode wordt uitgevoerd. Indien hier wordt gekozen voor 4: Na definitieve plaatsing van de order, dan wordt het uitvoeren van de ordertrackingcode uitgesteld tot een succesvolle betaling is binnengekomen, indien er gebruik gemaakt wordt van een koppeling met een betaalprovider.

   Let op:

   Indien de Ordertracking wordt uitgevoerd na terugkomst van de Betaalprovider; houd er dan rekening mee dat Orders die worden afgerekend via een Betaalprovider die geen feedback terug (kan) geven, niet kunnen worden getracked.

4. Maakt u gebruik van Google Tag Manager? Stel de Container ID dan in onder Eigenschappen → Instellingen → Webwinkel → Zoekmachines en Statistieken. De noodzakelijke code-snippets om communicatie met Google Tag Manager mogelijk te maken, worden vervolgens automatisch geïnjecteerd in uw webwinkel.
   
   
   

5. Geef in de Backoffice bij Eigenschappen → 3/6 Eigenschappen template → Informatie op bestelpagina → Order tracking code de benodigde Ordertrackingcode op. Let op dat hier gebruik gemaakt dient te worden van Twig-syntax; de oude Smarty-syntax wordt niet meer ondersteund. Een lijst van voorbeelden:

   Google Tag Manager Expand source

   <!-- Google Tag Manager -->
   <script>
   /* Build array of all products in the Order */
   var products = [];
   {% for article in order.cart.articles %}
       products.push({
           'sku': '{{ article.articlecode }}',
           'name': '{{ article.description }}',
           'category': '{{ article.group.name }}',
           'price': {{ article.price|round(2) }},
           'quantity': {{ article.quantity }}
       });
   {% endfor %}
   
   window.dataLayer = window.dataLayer || [];
   dataLayer.push({
      'event': 'conversion_sale',
      'transactionId': '{{order.orderId}}',
      'transactionAffiliation': '',
      'transactionTotal': {{order.price|round(2)}},
      'transactionTax': {{order.vatbag.prices(true)|round(2)}},
      'transactionShipping': {{order.shipmethod.price|round(2)}},
      'transactionProducts': products
   });
   </script>
   

   Google Tag Manager (met uitgeschakelde Verzendwijzen) Expand source

   <!-- Google Tag Manager -->
   <!-- Met uitgeschakelde verzendwijzen, kan de 'transactionShipping' property niet meegegeven worden -->
   <script>
   /* Build array of all products in the Order */
   var products = [];
   {% for article in order.cart.articles %}
       products.push({
           'sku': '{{ article.articlecode }}',
           'name': '{{ article.description }}',
           'category': '{{ article.group.name }}',
           'price': {{ article.price|round(2) }},
           'quantity': {{ article.quantity }}
       });
   {% endfor %}
   
   window.dataLayer = window.dataLayer || [];
   dataLayer.push({
      'event': 'conversion_sale',
      'transactionId': '{{order.orderId}}',
      'transactionAffiliation': '',
      'transactionTotal': {{order.price|round(2)}},
      'transactionTax': {{order.vatbag.prices(true)|round(2)}},
      'transactionProducts': products
   });
   </script>

   Google Tag Manager - Enhanced Ecommerce Expand source

   <!-- GTM Enhanced Ecommerce - triggert alleen 'purchase'-evenementen -->
   <script>
   {% if order.shipmethod %}
       let shipmentPrice = '{{order.shipmethod.price|round(2)}}';
   {% else %}
       let shipmentPrice = '0';
   {% endif %}
   
   {% if order.cart.discounts and order.cart.discounts.coupon is defined %}
       let coupon = '{{order.cart.discounts['discount.coupon'].coupon}}';
   {% else %}
       let coupon = '';
   {% endif %}
   
   let products = [];
   {% for article in order.cart.articles %}
       products.push({
           'name': '{{ article.description }}',
           'id': '{{ article.id }}',
           'price': '{{ article.price|round(2) }}',
           'quantity': '{{ article.quantity }}',
           'category': '{{ article.group.name }}'
       });
   {% endfor %}
   
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({ecommerce: null});
   
   window.dataLayer.push({
       'event': 'conversion_sale',
       'ecommerce': {
           'purchase': {
               'actionField': {
                   'id': '{{order.orderId}}',
                   'affiliation': '',
                   'revenue': '{{order.price|round(2)}}',
                   'tax': '{{order.vatbag.prices(true)|round(2)}}',
                   'shipping': shipmentPrice,
                   'coupon': coupon
               }
           },
           'products': products
       }
   });
   </script>

   Google Tag Manager - Enhanced Ecommerce, zonder Verzendwijzen Expand source

   <!-- GTM Enhanced Ecommerce - triggert alleen 'purchase'-evenementen -->
   <script>
   {% if order.cart.discounts and order.cart.discounts.coupon is defined %}
       let coupon = '{{order.cart.discounts['discount.coupon'].coupon}}';
   {% else %}
       let coupon = '';
   {% endif %}
   
   let products = [];
   {% for article in order.cart.articles %}
       products.push({
           'name': '{{ article.description }}',
           'id': '{{ article.id }}',
           'price': '{{ article.price|round(2) }}',
           'quantity': '{{ article.quantity }}',
           'category': '{{ article.group.name }}'
       });
   {% endfor %}
   
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({ecommerce: null});
   
   window.dataLayer.push({
       'event': 'conversion_sale',
       'ecommerce': {
           'purchase': {
               'actionField': {
                   'id': '{{order.orderId}}',
                   'affiliation': '',
                   'revenue': '{{order.price|round(2)}}',
                   'tax': '{{order.vatbag.prices(true)|round(2)}}',
                   'coupon': coupon
               }
           },
           'products': products
       }
   });
   </script>

   Google Tag Manager (Google Analytics 4 implementatie) Expand source

   <!-- GTM GA4 Ordertracking code -->
   <script>
   {% if order.shipmethod %}
       let shipmentPrice = '{{order.shipmethod.price|round(2)}}';
   {% else %}
       let shipmentPrice = '0';
   {% endif %}
    
   {% if order.cart.discounts and order.cart.discounts.coupon is defined %}
       let coupon = '{{order.cart.discounts['discount.coupon'].coupon}}';
   {% else %}
       let coupon = '';
   {% endif %}
    
   let products = [];
   {% for article in order.cart.articles %}
       products.push({
           'item_name': '{{ article.description }}',
           'item_id': '{{ article.id }}',
           'price': '{{ article.price|round(2) }}',
           'quantity': '{{ article.quantity }}',
           'item_category': '{{ article.group.name }}'
       });
   {% endfor %}
    
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({ecommerce: null});
    
   window.dataLayer.push({
       'event': 'purchase',
       'ecommerce': {
           'transaction_id': '{{order.orderId}}',
           'affiliation': '',
           'currency': '{{ price_currency_iso }}',
           'value': '{{order.price|round(2)}}',
           'tax': '{{order.vatbag.prices(true)|round(2)}}',
           'shipping': shipmentPrice,
           'coupon': coupon,
           'items': products
       }
   });
   </script>

   Google Analytics (Analytics.js-implementatie) Expand source

   <!-- NIET gebruiken indien Google Tag Manager is geconfigureerd -->
   <!-- Vervang TAG_ID door uw eigen Tag ID -->
   
   <!-- Google Analytics -->
   <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   
   ga('create', 'TAG_ID', 'auto');
   ga('set', 'anonymizeIp', true);
   ga('send', 'pageview');
   ga('require', 'ecommerce');
   
   
   ga('ecommerce:addTransaction', {
   	'id': '{{ order.orderId }}',
       'affiliation': '',
       'revenue': '{{ order.price|round(2) }}',
       'shipping': '{{ order.shipmethod.price|round(2) }}',
       'tax': '{{ order.vatbag.prices(true)|round(2) }}'
   });
   
   
   {% for article in order.cart.articles %}
       ga('ecommerce:addItem', {
           'id': '{{ order.orderId }}',
           'name': '{{ article.description }}',
           'sku': '{{ article.articlecode }}',
           'category': '{{ article.group.name }}',
           'price': '{{ article.price|round(2) }}',
           'quantity': '{{ article.quantity }}'
       });
   {% endfor %}
   
   
   ga('ecommerce:send');
   </script>
   <!-- End Google Analytics -->

   Facebook Pixel Expand source

   [[ Dit is puur de tracking voor een Verkoop. De Basispixelcode, met de fbq('init')-regel moet nog worden toegevoegd binnen de <head> van de website, of voorafgaand aan dit <script>-blok. ]]
   
   
   <!-- FB Pixel -->
   <script>
       {% set ids = "" %}
       {% for article in order.cart.articles %}
           {% if loop.first %}
               {% set ids = "'" ~ article.articlecode ~ "'" %}
           {% else %}
               {% set ids = ids ~ ", '" ~ article.articlecode ~ "'" %}
           {% endif %}
       {% endfor %}
   
       (function() {
           fbq('track', 'Purchase', {
               'content_ids': [{{ids}}],
               'content_type': 'product',
               'value': {{order.price|round(2)}},
               'currency': {{price_currency_iso}}'
           });
       });
   
   </script>

6. Staat de gewenste code hier niet boven, of wordt meer verwacht dan basale ordertracking, dan kan je de code zelf aanpassen voor gebruik binnen Equinoxe. De belangrijkste informatie is terug te vinden in de volgende variabelen (tussen dubbele accolades):

   Is het nodig om een prijs af te ronden? Gebruik dan het filter |round(). Dit filter kent één parameter, om aan te geven op hoeveel decimalen de prijs moet worden afgerond. Bijvoorbeeld:

   {{ order.price|round(2) }} rondt de prijs af op twee decimalen achter de komma, waarbij de laatste nul(len) achter de komma komen te vervallen (42.599 wordt afgerond als 42.6)

   Onderstaande variabelen kunnen alleen gebruikt worden in de Ordertrackingcode in Equinoxe. Deze variabelen zijn niet als zodanig beschikbaar in externe tools zoals Google Tag Manager.

   1. Order-ID: {{ order.orderId }}
   2. Totaalwaarde order: {{ order.price }}
   3. Prijs betaal- en verzendwijzen: {{ order.paymethod.price }} en {{ order.shipmethod.price }} - indien beschikbaar
   4. Winkelwagen: {{ order.cart }}
   5. Artikelen: {{ order.cart.articles }},
      Artikelen, in een loop: {% for article in order.cart.articles %} {% endfor %}
      
      1. Artikelnaam: {{ article.description }}
      2. Hoofdgroep artikel: {{ article.group }}, groepsnaam: {{ article.group.name }}
      3. Permalink: {{ article.url }}
      4. Prijs: {{ article.price }}
      5. Aantal in order: {{ article.quantity }}
   6. ID Inlogklant: {% if is_granted('ROLE_USER') %}{{ order.user.id }} {% endif %}
      order.user.id is niet gezet, indien de klant niet is ingelogd. Via is_granted kan worden gecontroleerd of de klant is ingelogd.