Como enviar eventos de compradores para a Shoply AI a partir de uma loja Shopify headless

A Shoply AI monitoriza o comportamento dos compradores (adicionar ao carrinho, checkout, visualizações de produtos, etc.) para melhorar a classificação das pesquisas e as recomendações. Nas lojas Shopify padrão, isto acontece automaticamente através da nossa extensão Web Pixel . No entanto, os Web Pixels da Shopify não são executados em lojas headless, porque dependem do motor de renderização da loja Shopify para injetar o sandbox do pixel.

Se gere uma loja Shopify headless (por exemplo, com Next.js, Hydrogen ou um frontend personalizado), tem de enviar estes eventos diretamente a partir do código do frontend.

Pré-requisitos

Instalou a Shoply AI e o script da Shoply AI está carregado na sua loja.

Enviar um evento

Assim que o script da Shoply AI estiver carregado, expõe automaticamente window.shoplyLogEvent. Chame-o diretamente — não precisa de gerir IDs de sessão, chaves da loja ou endpoints da API:


window.shoplyLogEvent(eventName, data)

A estrutura do objeto data depende do tipo de evento (consulte abaixo).

Eventos obrigatórios para suportar o acompanhamento de conversões

`product_added_to_cart`

Dispare este evento quando um comprador adicionar uma variante de produto ao carrinho.


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 estiver a utilizar o checkout nativo da Shopify, normalmente não precisa deste evento, uma vez que utilizamos eventos de web pixel para acompanhar automaticamente a conclusão do checkout. No entanto, se tiver o seu próprio fluxo de checkout, dispare este evento quando um comprador concluir o checkout (por exemplo, na página de confirmação da encomenda).


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"
})

Precisa de ajuda?

Não hesite em marcar uma reunião connosco e ajudá-lo-emos a integrar o acompanhamento de eventos na sua loja headless.