ConverlayConverlay

クイックスタート

2分以内にトラッキングを開始できます。以下からお好みの方法を選択してください。

Vanilla JavaScript

createConverlayをインポートして初期化し、各イベントに対してtrack()を呼び出します。

tracking.ts
import { createConverlay } from '@converlay/sdk'

const converlay = createConverlay({
  shopDomain: 'my-store.myshopify.com',
  autoPageView: true,
  debug: true,
})

// Track a product view
converlay.track('view_item', {
  ecommerce: {
    items: [{
      item_id: 'SKU-001',
      item_name: 'Classic Tee',
      price: 29.99,
      quantity: 1,
    }],
  },
})

// Track a purchase
converlay.track('purchase', {
  ecommerce: {
    transaction_id: 'ORD-5678',
    value: 59.98,
    currency: 'USD',
    items: [
      { item_id: 'SKU-001', item_name: 'Classic Tee', price: 29.99, quantity: 2 },
    ],
  },
  userData: {
    email: 'customer@example.com',
  },
})

React

アプリをConverlayProviderでラップし、任意のコンポーネントでuseConverlay()フックを使用します。

App.tsx
'use client'

import { ConverlayProvider, useConverlay } from '@converlay/sdk/react'

// Wrap your app
export default function App({ children }) {
  return (
    <ConverlayProvider
      shopDomain="my-store.myshopify.com"
      autoPageView={true}
    >
      {children}
    </ConverlayProvider>
  )
}

// Use in any component
function AddToCartButton({ product }) {
  const { track } = useConverlay()

  return (
    <button onClick={() => {
      track('add_to_cart', {
        ecommerce: {
          items: [{
            item_id: product.id,
            item_name: product.title,
            price: product.price,
            quantity: 1,
          }],
        },
      })
    }}>
      Add to Cart
    </button>
  )
}

次に何が起こるか

  1. SDKが永続的なclient_idを生成し、localStorageで30分のセッションを管理します
  2. UTMパラメータとClick ID（gclid、fbclid、ttclid）が自動的にキャプチャされます
  3. イベントはsendBeacon（fetchフォールバック付き）でConverlay収集エンドポイントに送信されます
  4. Converlayが接続された送信先（GA4、Meta、TikTokなど）にイベントをサーバー間で転送します

次のステップ

前へ← インストール次へイベントトラッキング →