Shopify 웹 픽셀은 전환율과 같은 구매 데이터를 추적하기 위한 Shopify의 솔루션이에요. 웹 픽셀을 사용하는 방식은 크게 두 가지가 있어요:

앱 웹 픽셀
사용자 지정 웹 픽셀

앱 웹 픽셀

일부 앱 픽셀(예: Omega Facebook Pixel)은 Shopify 웹 픽셀과 직접 통합돼요. 이러한 앱은 Aftersell과 함께 작동하기 위해 추가 설정이 필요하지 않아요.

사용자 지정 웹 픽셀

사용자 지정 픽셀을 사용하면 Shopify 마켓플레이스에서 요구 사항에 맞는 앱 픽셀을 찾을 수 없는 경우 맞춤형 솔루션을 만들 수 있어요. 아래에서는 기존 주문 상태 페이지 추적 스크립트를 사용자 지정 픽셀을 사용하도록 변환하는 방법을 설명해요. 진행하기 전에 사용자 지정 픽셀의 잠재적 위험을 확인해 주세요. 특히 Google Tag Manager를 사용하는 경우, Shopify에서 이 마이그레이션을 완료하기 위한 유용한 문서를 제공해요. 전환 추적을 위한 사용자 지정 픽셀을 만드는 데는 3가지 핵심 단계가 있어요.

서드파티 JavaScript SDK 준비하기
웹 픽셀을 사용해 전환 추적 설정하기
사용자 지정 픽셀 연결하기

1. 서드파티 JavaScript SDK 준비하기

제공된 픽셀 코드에 있는 모든 HTML을 제거해야 해요. HTML <script> 태그를 통해 로드되는 JavaScript는 대신 JavaScript 전용 방식으로 로드해야 해요. 이 과정은 여기에서 더 자세히 다뤄져요. Google Tag Manager를 사용하는 예시예요. 원본 픽셀 코드:

<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>

HTML을 제거하고 <script> 태그를 재작업한 후:

const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');

Google의 픽셀 SDK는 Shopify 사용자 지정 픽셀에서 데이터를 자동으로 전송하지 않는다는 점에 유의하세요. 데이터를 전송하려면 이벤트를 구독해야 해요.

2. 웹 픽셀을 사용해 전환 추적 설정하기

사용자 지정 픽셀로 전환을 추적하려면 Shopify에서 제공하는 checkout_completed 이벤트를 구독하세요. 이 이벤트는 고객에게 구매 후 페이지가 표시되는 경우 해당 페이지에서, 그렇지 않은 경우 감사 페이지에서 트리거돼요. 어느 경우든 이 이벤트는 한 번만 트리거되므로 구매가 이중 집계되는 것을 방지하기 위한 추가 로직이 필요하지 않아요.

analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});

event에서 가져올 수 있는 데이터 포인트는 아래 참고 자료에서 확인하세요. Shopify checkout_completed 이벤트 사용자 지정 Meta 픽셀의 예시예요. 체크아웃 완료 시 트리거되는 추적 코드:

!function(f,b,e,v,n,t,s)  
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?  
n.callMethod.apply(n,arguments):n.queue.push(arguments)};  
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';  
n.queue=[];t=b.createElement(e);t.async=!0;  
t.src=v;s=b.getElementsByTagName(e)[0];  
s.parentNode.insertBefore(t,s)}(window, document,'script',  
'https://connect.facebook.net/en_US/fbevents.js');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});

3. 사용자 지정 픽셀 연결하기

사용자 지정 픽셀을 추가하기 전에 고객 이벤트가 두 번 집계되지 않도록 기존 픽셀을 제거하거나 수정하세요. 기존 픽셀 코드는 theme.liquid, checkout.liquid(Plus 판매자 전용), 체크아웃 설정의 Additional scripts 등 존재하는 모든 위치에서 수동으로 제거해야 해요. 이 작업이 완료되면 다음 단계에 따라 사용자 지정 픽셀을 스토어에 연결하세요.

Settings > Customer Events > Custom Pixels > Add Custom Pixel로 이동하세요
1. 사용자 지정 픽셀의 이름을 입력하세요.
“Code” 섹션에 사용자 지정 픽셀 코드를 붙여넣으세요.
고객 개인정보 설정이 올바르게 구성되었는지 확인하세요.
사용자 지정 픽셀에서 “Save”를 클릭하세요.
“Connect”를 클릭해 사용자 지정 픽셀을 활성화하세요!

시작하기

홈 페이지

모범 사례

구매 후 업셀

체크아웃 업셀 (Shopify Plus)

감사 페이지

제품 페이지 업셀

Rokt Thanks

전략

분석 및 추적

연동

Aftersell MCP

요금 및 계정

문제 해결

Shopify 웹 픽셀 구성하기

앱 웹 픽셀

사용자 지정 웹 픽셀

1. 서드파티 JavaScript SDK 준비하기

2. 웹 픽셀을 사용해 전환 추적 설정하기

3. 사용자 지정 픽셀 연결하기

​앱 웹 픽셀

​사용자 지정 웹 픽셀

​1. 서드파티 JavaScript SDK 준비하기

​2. 웹 픽셀을 사용해 전환 추적 설정하기

​3. 사용자 지정 픽셀 연결하기

앱 웹 픽셀

사용자 지정 웹 픽셀

1. 서드파티 JavaScript SDK 준비하기

2. 웹 픽셀을 사용해 전환 추적 설정하기

3. 사용자 지정 픽셀 연결하기