헤드리스 Shopify 스토어에서 Shoply AI로 쇼핑객 이벤트를 전송하는 방법

Shoply AI는 검색 순위와 추천을 개선하기 위해 쇼핑객 행동(장바구니 추가, 결제, 제품 조회 등)을 추적합니다. 일반 Shopify 스토어프런트에서는 Web Pixel 확장 프로그램 을 통해 이 작업이 자동으로 이루어집니다. 하지만 Shopify Web Pixels는 헤드리스 스토어프런트에서 실행되지 않습니다. 픽셀 샌드박스를 삽입하려면 Shopify의 스토어프런트 렌더링 엔진에 의존하기 때문입니다.

헤드리스 Shopify 스토어(예: Next.js, Hydrogen 또는 맞춤 프런트엔드)를 운영하는 경우 프런트엔드 코드에서 직접 이러한 이벤트를 전송해야 합니다.

사전 요구 사항

Shoply AI를 설치했고 스토어프런트에서 Shoply AI 스크립트가 로드되어 있어야 합니다.

이벤트 전송

Shoply AI 스크립트가 로드되면 자동으로 **window.shoplyLogEvent**를 노출합니다. 직접 호출하면 됩니다. 세션 ID, 스토어 키 또는 API 엔드포인트를 직접 관리할 필요가 없습니다.


window.shoplyLogEvent(eventName, data)

data 객체의 구조는 이벤트 유형에 따라 달라집니다(아래 참조).

전환 추적을 위해 반드시 지원해야 하는 이벤트

`product_added_to_cart`

쇼핑객이 제품 변형을 장바구니에 추가할 때 실행합니다.


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`

Shopify의 기본 결제를 사용하는 경우에는 일반적으로 이 이벤트가 필요하지 않습니다. 웹 픽셀 이벤트를 사용하여 결제 완료를 자동으로 추적하기 때문입니다. 하지만 자체 결제 흐름이 있다면 쇼핑객이 결제를 완료할 때(예: 주문 확인 페이지에서) 실행합니다.


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

도움이 필요하신가요?

저희와 미팅을 예약하시면 헤드리스 스토어프런트에 이벤트 추적을 통합하는 방법을 도와드리겠습니다.