Panoramica

L’integrazione consiste nell’inclusione di un tag Javascript che consente di acquisire le intenzioni dell’utente durante la navigazione del sito web. Lo snippet è composto da due parti:

  • Il loader, una libreria di Javascript che deve essere dichiarata in ogni pagina e si occupa della costruzione e dell’invocazione delle chiamate ai server Transactionale.

  • Il tracker ci consente di acquisire gli eventi di navigazione dei visitatori del sito web (prodotti visti e acquistati), che quindi utilizziamo per determinare le raccomandazioni pertinenti e personalizzate.

Implementare il tracker è rapido, semplice ed invisibile per gli utenti. La qualità delle raccomandazioni dipende in modo diretto dalla qualità dell’implementazione del tracker, inclusi i tag installati in tutte le pagine, il trasferimento dei parametri corretti, etc.

Lo snippet:

  • Non altera dal punto di vista visivo il sito ed è completamente invisibile per gli utenti.
  • E’ asincrono e non rallenta il caricamento delle pagine.
  • Deve essere implementato nei punti corretti di ciascuna pagina del sito.

Dove inserire lo snippet trackTransaction

Dalla pagina di Admin del tuo Shopify, seleziona Settings

Seleziona Checkout

Copia la tua API Key dalla maschera Your API Key. Invece di selezionare il testo puoi anche semplicemente cliccare sul tasto Copy.”

Inserisci il seguente snippet nel box Additional script

Nello snippet seguente dovrai sostituire “ApiKey” con la tua API Key che troverai sul sito di Transactionale, nella pagina My Account -> Integration.
<script>
    window._trx = window._trx || [];
    window._trx.push({
        event: 'setAccount', account: '*** LA TUA AUTH KEY ***', country: '*** IL TUO CODICE NAZIONE A 2 LETTERE ISO (ad es. IT) ***'
    });
</script>
<script src="https://static.transactionale.com/trx/v2/trx.js" async="true"></script>
<script>
    window._trx.push(
        {
            'event' : 'trackTransaction',
            'transaction':{
                'id': "{{order.order_number}}",
                'subtotal': "{{order.subtotal_price | money_without_currency}}",
                'shipping': "{{order.shipping_price | money_without_currency}}",
                'discount': "{% for discount in order.discounts %} {{discount.total_amount | money_without_currency}}{% endfor %}" ,
                'total': "{{order.total_price | money_without_currency}}",
                'coupon': "{% for discount in order.discounts %} {{discount.code}} {% endfor %}" ,
                'currency': "{{shop.currency}}",
            },
            'items': [
                {% for line_item in order.line_items %}
                {
                    'id': "{{line_item.product.id}}",
                    'price': "{{line_item.product.price | money_without_currency}}",
                    'quantity': "{{line_item.quantity}}"
                },
                {% endfor %} ],
            'address':{
                'address': "{{order.billing_address.address1}}",
                'address2': "{{order.billing_address.address2}}",
                'city': "{{order.billing_address.city}}",
                'postalCode': "{{order.billing_address.zip}}",
                'country': "{{order.billing_address.country_code}}",
                'phone': "{{order.billing_address.phone}}",
            },
            'customer': {
                'firstName': "{{order.customer.first_name}}",
                'lastName': "{{order.customer.last_name}}",
                'company': "{{order.customer_address.company}}",
                'email': "{{order.customer.email}}",
                'optin' : "{{checkout.buyer_accepts_marketing}}",
            },
            "touchpointType": "auto"
        });
</script>
<div id="tr_touchpoint_container"></div>

Salva cliccalndo il pulsante Save in alto

Dove inserire il loader e l’evento viewPage

Dalla pagina di Admin del tuo Shopify, seleziona Online Store

Dalla pagina Themes->current theme clicca su Action->Edit Code

Nello snippet seguente dovrai sostituire “ApiKey” con la tua API Key che troverai sul sito di Transactionale, nella pagina My Account -> Integration come hai fatto in precedenza

Clicca su theme.liquid e incolla lo snippet prima della chiusura del tag <head>

<script>
    window._trx = window._trx || [];
    window._trx.push(
        { event: 'setAccount', account: '**API-KEY**', country: 'IT' },
        { event: 'viewPage' }
    );
</script>
<script src="https://static.transactionale.com/trx/v2/trx.js" async="true"></script>

Clicca sul pulsante Salva in alto

Verifica integrazione e webhook

Puoi verificare il corretto funzionamento dell’integrazione tecnologica e del webhook url tramite queste semplici istruzioni:

Verifica integrazione
Verifica webhook