Come inviare gli eventi degli acquirenti a Shoply AI da un negozio Shopify headless

Shoply AI traccia il comportamento degli acquirenti (aggiunta al carrello, checkout, visualizzazioni dei prodotti, ecc.) per migliorare il posizionamento nei risultati di ricerca e i consigli. Nei negozi Shopify standard, questo avviene automaticamente tramite la nostra estensione Web Pixel . Tuttavia, gli Shopify Web Pixel non vengono eseguiti nei negozi headless perché si basano sul motore di rendering del negozio Shopify per iniettare la sandbox del pixel.

Se gestisci un negozio Shopify headless (ad esempio con Next.js, Hydrogen o un frontend personalizzato), devi inviare questi eventi direttamente dal codice del tuo frontend.

Prerequisiti

Hai installato Shoply AI e lo script di Shoply AI è caricato sulla vetrina del tuo negozio.

Invio di un evento

Una volta caricato lo script di Shoply AI, questo espone automaticamente window.shoplyLogEvent. Chiamalo direttamente — non è necessario gestire personalmente gli ID di sessione, le chiavi del negozio o gli endpoint API:


window.shoplyLogEvent(eventName, data)

La struttura dell’oggetto data dipende dal tipo di evento (vedi sotto).

Eventi indispensabili per supportare il monitoraggio delle conversioni

`product_added_to_cart`

Attivalo quando un acquirente aggiunge una variante di prodotto al carrello.


await window.shoplyLogEvent('product_added_to_cart', {
  "cartLine": {
    "cost": {
      "totalAmount": {
        "amount": 769,
        "currencyCode": "USD"
      }
    },
    "merchandise": {
      "id": "42553607094387",  // Variant ID
      "title": "25.5 Mondo",
      "price": {
        "amount": 769,
        "currencyCode": "USD"
      },
      "product": {
        "id": "7834124058739"  // Product ID
      }
    },
    "quantity": 1
  },
  "clientId": "35214700-144e-4022-974e-fe008736e973",  // Not used
  "referrer": "https://demo.shoplyai.ai/collections/all"
})

`checkout_completed`

Se utilizzi il checkout nativo di shopify, di solito non è necessario, perché utilizziamo gli eventi web pixel per monitorare automaticamente il completamento del checkout. Tuttavia, se hai un flusso di checkout personalizzato, attivalo quando un acquirente completa il checkout (ad esempio nella pagina di conferma dell’ordine).


await window.shoplyLogEvent('checkout_completed', {
  "token": "8cea7db9ce551f0a8c9113a0f7f2dce0",  // Not used
  "order": {
    "id": "7251060916339",  // Shopify Order ID
    "customer": {
      "id": "9903183265907",  // Shopify Customer ID
      "isFirstOrder": true
    }
  },
  "lineItems": [
    {
      "finalLinePrice": {
        "amount": 1538,
        "currencyCode": "USD"
      },
      "quantity": 2,
      "variant": {
        "id": "42553607094387",  // Variant ID
        "title": "25.5 Mondo",
        "price": {
          "amount": 769,
          "currencyCode": "USD"
        },
        "product": {
          "id": "7834124058739"  // Product ID
        }
      }
    },
    {
      "finalLinePrice": {
        "amount": 384.93,
        "currencyCode": "USD"
      },
      "quantity": 1,
      "variant": {
        "id": "42553643958387",
        "title": "157 CM",
        "price": {
          "amount": 384.93,
          "currencyCode": "USD"
        },
        "product": {
          "id": "7834140180595"
        }
      }
    }
  ],
  "clientId": "35214700-144e-4022-974e-fe008736e973",  // Not used
  "referrer": "https://demo.shoplyai.ai/cart"
})

Hai bisogno di aiuto?

Sentiti libero di prenotare un incontro con noi e ti aiuteremo a integrare il monitoraggio degli eventi nella tua vetrina headless.