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.

Do Not Track HTTP-Header

Indien de Klant in zijn Browserinstellingen heeft aangegeven dat het browseverkeer niet moet worden bijgehouden, het zogenaamde Do Not Track-verzoek, dan zal Ordertracking voor die specifieke gebruiker in zijn geheel zijn uitgeschakeld.

Google Analytics 4

Maakt u gebruik van Google Analytics 4? Zorg er dan voor dat Google Analytics is aangemaakt en geïntegreerd in Google Tag Manager volgens deze stappen. Waar wij verderop verwijzen naar "Uw GA4-configuratietag", bedoelen wij de Tag die in het tweede deel ("Property instellen in Tag Manager") is aangemaakt.

Stap voor Stap

Instellen in LogiVert

Zorg ervoor dat je gebruik maakt van de allerlaatste Logivert-build. Tenminste LogiVert 8.0 is vereist voor Ordertracking onder Logivert Equinoxe.
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.
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.
Maakt u gebruik van Google Tag Manager? Stel de Container ID dan in onder Eigenschappen → Instellingen → Webwinkel → SEO, Statistieken & Inrichting. De noodzakelijke code-snippets om communicatie met Google Tag Manager mogelijk te maken, worden vervolgens automatisch geïnjecteerd in uw webwinkel.
Vergeet niet GA4 aan te vinken in de nieuwere versies van Logivert.

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 (Google Analytics 4 implementatie)

<!-- 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>

Facebook Pixel

[[ 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>

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.
Publiceer de gewijzigde ordertrackingcode, door minstens Gegevens > Algemeen te publiceren.

Instellen in Google Tag Manager

Indien in LogiVert ook is gekozen voor Google Tag Manager, dienen in Google Tag Manager nog enkele punten ingesteld te worden.
We gaan er vanuit dat Google Tag Manager in de basis al is ingericht en tags worden ontvangen.
Het is raadzaam om dit deel over te laten aan iemand die ervaringen heeft met het werken binnen Google Tag manager.

Log op https://tagmanager.google.com in met jouw Google Account
Maak een nieuwe trigger aan met bijvoorbeeld de naam: Trigger Ordertracking
1. Type: Custom Event
2. Event Name: purchase
3. Kies voor All Custom Events

Maak een nieuwe Tag aan, noem die bijvoorbeeld: Ecommerce tracking. Gebruik onderstaande Tag Configuratie

Veld	Bij Google Analytics 4-implementatie
Type tag	Google Analytics: GA4-gebeurtenis
Track Type / Gebeurtenisnaam	purchase
Google Analytics Settings / Configuratietag	Jouw GA4-configuratietag
Enhanced Ecommerce	Meer instellingen > E-commerce > E-commercegegevens sturen Ingeschakeld, gegevensbron: Data Layer

Geef als Trigger de net aangemaakte Trigger Ordertracking op.
Test via de Voorbeeldmogelijkheid van Google Tag Manager de wijzigingen door een test-bestelling te doen. De test slaagt, als - na het plaatsen van de testbestelling en eindigen op de succespagina - in de linkerkolom van het Tag Assistant-venster het event conversion_sale is genoemd, en aan de rechterkant onder de tab Data Layer de transactie-informatie is opgenomen.
Indien akkoord, Vergeet de wijzigingen niet te publiceren.