쇼피파이에 광고손익 설치하기

테마에 한 줄 + 주문 웹훅 주문 웹훅

아래 코드의 내사이트키 자리는 무료로 시작하고 쇼핑몰 주소를 넣으면 내 쇼핑몰 키로 채워져요.

1모든 페이지에 한 줄

아래 한 줄을 복사해요
<script async src="https://ad-profit.adprofit.workers.dev/t/내사이트키.js"></script>
관리자 → 온라인 스토어 → 테마 → 쓰는 테마의 ⋯ → 코드 편집
layout/theme.liquid 의 </head> 바로 앞에 붙여 넣고 저장

2구매(매출) 잡기

결제 완료 화면은 테마 코드를 돌리지 않아서, 구매는 쇼피파이가 보내 주는 주문 웹훅으로 받아요 — 브라우저·쿠키 동의·광고 차단과 상관없이 모든 주문이 들어오고, 위 한 줄이 장바구니에 적어 둔 방문 번호로 어디서 온 손님인지 이어요.

관리자 → 설정(Settings) → 알림(Notifications) → 웹훅(Webhooks) → 웹훅 만들기(Create webhook)
이벤트 주문 생성(Order creation) · 형식 JSON · 웹훅 API 버전은 (Latest)가 붙은 것 · URL 에 앱에서 쇼핑몰을 등록하면 나오는 내 주소 → 저장
같은 화면 아래 Your webhooks will be signed with … 의 서명 키를 복사해 앱의 서명 키 칸에 붙여 넣고 저장
만든 웹훅 옆 ⋯ → Send test → 앱에 “연결 확인 ✓”이 뜨면 끝

같은 주소로 주문 취소(Order cancellation) 웹훅도 하나 더 만들면 취소된 주문이 매출에서 빠져요.

▸ 맞춤 픽셀도 넣기 (선택 — 몇 초 더 빨리 · 첫 주문 여부)

Settings → Customer events → Add custom pixel → 이름(예: 광고손익) → 아래 코드 → Save → Connect. 쿠키 동의를 안 한 손님에게는 돌지 않아요(Customer privacy 설정). 웹훅과 같이 써도 같은 주문은 한 번만 세요.

analytics.subscribe('checkout_completed', async (event) => {
  try {
    const checkout = event.data.checkout;
    const order = checkout.order || {};
    const cookie = async (name) => (await browser.cookie.get(name)) || '';
    const touch = (await cookie('_adp')).split('^');
    const first = order.customer ? order.customer.isFirstOrder : null;
    const member = (await cookie('_adp_m')) === '1' && order.customer && order.customer.id;
    const body = {
      v: 1, s: '사이트키', e: 'order', px: 1, p: 0,
      o: String(order.id || '').split('/').pop(),
      a: Number(checkout.totalPrice && checkout.totalPrice.amount),
      sh: Number(checkout.shippingLine && checkout.shippingLine.price && checkout.shippingLine.price.amount) || 0,
      cur: checkout.currencyCode || undefined,
      f: touch[0] || '', l: touch[1] || '',
      vid: await cookie('_adp_v'), sid: (await cookie('_adp_s')).split('~')[0],
      h: event.context.document.location.hostname,
      nc: first === true ? 1 : first === false ? 0 : undefined,
      cu: member ? 'shopify:' + String(order.customer.id).split('/').pop() : undefined,
    };
    fetch('https://광고손익-주소/api/e', { method: 'POST', body: JSON.stringify(body), keepalive: true, mode: 'no-cors', credentials: 'omit' });
  } catch (e) {}
});

3설치 확인

앱의 설치 확인 버튼을 누르면 쇼핑몰이 새 탭으로 열리고, 스크립트 신호가 오면 바로 알려 드려요.