sGTM과 Data Store로 Shopify에서 100% 정확한 추적을 구현하는 방법
작성자
Vlad Kononov
이 글에서는 Stape와 서버 측 GTM을 사용해 Shopify에서 100% 정확한 추적을 구현하는 방법을 알아봅니다. 데이터 손실을 방지하고 어트리뷰션을 개선하며, 안정적이고 효과적인 추적 솔루션으로 마케팅 성과를 최적화하는 방법을 설명합니다. 정확한 Shopify 분석은 비즈니스 목표를 달성하는 데 매우 중요합니다.
예산을 어떻게 배분할지 결정하고, 캠페인 성과를 확인하고, 투자 대비 수익을 파악하려면 신뢰할 수 있는 데이터가 필요합니다. 추적해야 할 전자상거래 KPI를 파악하면 데이터를 제대로 이해하고 효과적으로 활용할 수 있습니다. 전환 추적이 누락되면 전체 상황을 정확히 파악하지 못하고 잘못된 의사결정을 내릴 수 있습니다. 다행히 Stape가 이 문제를 해결해 드립니다. 이 글에서는 어떤 상황에서도 Shopify에서 구매의 100%를 추적하고 필요한 모든 데이터를 분석 및/또는 마케팅 플랫폼으로 전송하여 더 유용한 인사이트와 정확한 어트리뷰션 보고서를 얻고 픽셀 학습을 더 효과적으로 진행하는 방법을 설명합니다.
Shopify는 다양한 이벤트를 구독하고 더 정확하게 추적할 수 있는 Web Pixel API를 제공하지만, 광고 또는 분석 플랫폼에 보고되지 않는 주문이 여전히 일부 발생할 수 있습니다. 이는 광고 차단기, ITP 제한, 느린 인터넷 연결, 사용자 기기의 오류 또는 단순한 우연 등 다양한 이유로 발생할 수 있습니다. 이러한 요인 중 어느 하나라도 전환 추적이 누락되는 원인이 될 수 있습니다.
하지만 걱정하지 마세요. Stape가 해결해 드립니다! Shopify 서버 측 추적을 사용하면 이러한 일반적인 문제를 우회할 수 있습니다.
Data Store 기능은 Pro 요금제 이상에서 사용할 수 있습니다. 맞춤형 솔루션이 필요하다면 영업팀에 문의해 주세요.
수동으로 이벤트를 설정할 필요가 없습니다
Shopify용 Stape Conversion Tracking 및 Setup Wizard를 사용하면 몇 분 안에 서버 측 GTM을 설치하고, 주요 전자상거래 이벤트를 자동으로 생성하며, Google, Meta, TikTok 등에 바로 사용할 수 있는 태그를 불러올 수 있습니다. 이벤트는 Stape의 서버 측 추적 플랫폼을 통해 처리되므로 최대 40% 더 많은 전환을 확보하고 ROAS를 개선하는 데 도움이 됩니다.
단계별 설정
간단히 정리하면 구현 과정은 다음과 같습니다.
- 1.평소와 같이 웹 및 서버 GTM 컨테이너를 사용해 이벤트 추적을 설정합니다.
- 2.마케팅 및/또는 분석 Cookie를 Data Store에 저장하고, 구매 이벤트가 웹 컨테이너에서 보고되지 않은 경우 이를 대체 데이터로 사용할 수 있도록 합니다.
- 3.웹에서 보고된 모든 구매 이벤트를 Data Store에 저장합니다. 이를 통해 어떤 거래가 보고되었는지 확인할 수 있습니다.
- 4.Shopify 마켓플레이스에서 제공되는 Stape Conversion Tracking app을 사용하거나 Shopify의 네이티브 웹훅을 사용해 웹훅을 설정하고 생성된 모든 주문을 sGTM으로 보고합니다.
- 5.sGTM에서 웹훅을 수신하면 해당 주문이 이미 Data Store에 저장되었는지 확인합니다. 이미 저장되어 있다면 해당 거래는 웹 컨테이너에서 실시간으로 보고된 것입니다. Data Store에서 이 주문을 찾을 수 없다면 어떤 이유로든 보고되지 않은 것이므로 웹훅을 처리하고 Data Store에서 필요한 Cookie를 가져온 다음 Conversions API를 통해 필요한 마케팅 및/또는 분석 플랫폼으로 보고해야 합니다.
시작하기 전에
아래 안내에 따라 구현을 시작하기 전에 Data Store를 활성화해야 합니다.
1. Stape 계정에 로그인하고 대시보드에서 sGTM 컨테이너를 선택합니다.
2. Data Store 탭을 클릭합니다.
3. Activate Data Store를 클릭합니다.
1단계. Stape Conversion Tracking app으로 기본 추적 설정 구현
Shopify의 Stape Conversion Tracking app을 사용하면 Custom GTM and GA4 Loader를 쉽게 설치하고 광고 차단기에 대한 대응력을 높일 수 있습니다. Shopify에 GTM 설치를 완료하면 이 기본 레이어가 서버 컨테이너에 필요한 클라이언트 측 데이터 수집을 처리합니다. Cookie Keeper 기능과 함께 사용하면 ITP 제한도 우회할 수 있습니다.
이 단계를 구현하는 방법을 설명하는 유용한 글과 바로 사용할 수 있는 컨테이너 템플릿이 있습니다. 확인해 보세요.
웹 및 서버 GTM으로 Shopify 추적 디버깅: 완벽 가이드 – 기본 설정이 적용되었다면 검증을 건너뛰지 마세요. Shopify의 샌드박스 결제 환경에서는 태그가 GTM 미리보기에서 정상적으로 작동하는 것처럼 보여도 운영 환경에서는 조용히 실패할 수 있습니다.
2단계. 필요한 Cookie를 저장하려면 Activate Data Store를 클릭합니다.
이제 나중에 필요할 수 있는 Cookie를 Data Store에 저장해야 합니다.
예를 들어 Shopify Web Pixel에서 sGTM으로 전송되는 “checkout_started” 이벤트에서 Meta Cookie를 저장합니다. 이 시점에는 결제 토큰을 사용할 수 있으므로 나중에 웹훅과 결제 정보 및 Cookie를 연결하기 위한 연계 파라미터로 사용할 수 있습니다.
이와 동일한 과정은 데이터를 보고하려는 다른 플랫폼에도 적용할 수 있습니다.
다음 코드 스니펫은 결제 토큰과 Meta Cookie를 포함한 데이터를 서버 컨테이너 URL로 전송합니다. Data Client가 이 요청을 처리하며, 기본적으로 /data 경로에서 요청을 수신합니다.
analytics.subscribe("checkout_started", (event) => {
setTimeout(() => {
async function getCookiesPayload() {
try {
const payload = {
"event": "store_cookies",
"cart_token": init.data.cart.id,
"fbp": await browser.cookie.get('_fbp'),
"fbc": await browser.cookie.get('_fbc')
};
return payload;
} catch (error) {
console.error('Error retrieving cookies:', error);
return null;
}
}
async function sendCookiesToSgtm() {
const payload = await getCookiesPayload();
if (payload) {
fetch("https://sst.example.com/data", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload),
keepalive: true
}).then(response => {
console.log('Payload sent successfully:', response);
}).catch(error => {
console.error('Error sending payload:', error);
});
}
}
sendCookiesToSgtm();
}, 1500);
});다음으로 서버 GTM 갤러리에서 사용할 수 있는 Stape Store Writer tag를 사용해 이러한 Cookie를 Stape Store에 저장해야 합니다. 나중에 Cookie를 가져와 웹훅을 통해 Meta로 보고하기 위해서입니다. 이러한 Cookie는 장바구니 토큰으로 참조되며, 장바구니 토큰은 ‘store_cookies’ 이벤트에서 사용할 수 있고 Shopify에서 전송하는 네이티브 웹훅 데이터에도 포함됩니다.
다음은 Stape Store Writer tag를 구성하는 방법의 예입니다.
해당되는 경우 개인정보 보호 규정과 스토어의 광고 및/또는 분석 동의 상태도 고려하세요. 그래야 나중에 사용자가 동의했는지, 해당 전환을 보고할 수 있는지 확인할 수 있습니다. 또는 동의 배너가 Shopify Privacy API를 지원한다면 필요한 동의 상태가 부여된 경우에만 Web Pixel이 실행되도록 설정할 수 있습니다.
3단계. 웹 컨테이너에서 보고된 모든 구매를 Data Store에 저장
웹 컨테이너에서 일반적인 방식으로 보고된 모든 구매를 Data Store에 저장해야 나중에 해당 전환이 이미 Meta에 보고되었는지 확인할 수 있습니다.
이전 단계에서 사용한 것과 비슷한 방법을 적용하되, 이번에는 transaction_id를 문서 키로 사용합니다. 이 값은 Shopify 웹훅 데이터에서도 확인할 수 있습니다.
다음은 이 목적으로 구성할 수 있는 Stape Store Writer tag의 예입니다.
sGTM, Shopify, Data Store에서 사용되는 데이터 유형 간 충돌을 피하려면 transaction_id의 “number” 변수 유형을 문자열로 변환하는 것이 좋습니다. sGTM 갤러리에는 이를 쉽게 처리할 수 있는 변수가 있습니다.
4단계. Shopify에서 웹훅 설정
Shopify에서는 여러 가지 방법으로 웹훅을 설정할 수 있습니다. 가장 쉬운 방법 중 하나는 Stape Conversion Tracking app을 사용하는 것입니다. 여기에는 장바구니 토큰, 올바르게 구조화된 주문 및 제품 정보, 사용자 데이터 등 필요한 모든 데이터가 포함되어 있습니다. 네이티브 웹훅 기능이나 원하는 다른 앱을 사용할 수도 있습니다.
또한 Stape의 Request Delay Power Up을 사용하는 것을 권장합니다. 이를 통해 웹 컨테이너에서 전송된 요청이 백엔드에서 전송된 웹훅보다 먼저 서버 컨테이너에 도달하도록 할 수 있습니다. 이렇게 하면 요청 순서를 명시적으로 제어할 수 있으며, 이는 이 설정에서 매우 중요합니다. 1분의 지연이면 구매 요청이 서버 컨테이너에 도달하고 필요한 모든 태그가 실행되어 필요한 요청을 처리하기에 충분합니다.
5단계. 웹훅으로 전송된 주문이 이미 처리되었는지 확인
이 단계에서는 이미 다음과 같은 상태입니다.
- 1.필요한 모든 마케팅 및/또는 분석 Cookie가 Data Store에 cart_token 문서로 저장되어 있습니다.
- 2.웹 컨테이너에서 보고된 모든 구매가 Data Store에 transaction_id 문서로 저장되어 있습니다.
- 3.Shopify에서 주문이 생성될 때마다 짧은 지연 후 서버 컨테이너로 웹훅이 전송됩니다.
이제 수신된 웹훅을 처리하여 Meta에 보고해야 하는지, 아니면 주문이 이미 처리되었으므로 무시해야 하는지 확인해야 합니다.
따라서 수신된 웹훅에서 transaction_id를 가져와 Stape Store Lookup variable을 사용하여 Data Store에서 사용할 수 있는지 확인합니다.
그 결과 이 transaction_id가 Data Store에서 발견되면 변수는 ‘true’를 반환합니다. 이는 해당 거래가 이미 웹 컨테이너에서 보고되었으므로 이 웹훅을 무시해야 한다는 의미입니다.
변수가 undefined 또는 false를 반환한다면 이 거래는 어떤 이유로든 웹 컨테이너에서 보고되지 않은 것이므로 이 웹훅을 처리해야 합니다.
Shopify CAPI에 사용할 추가 Facebook 태그를 설정하고 value, currency, content_ids, 사용자 데이터 등의 기본 정보를 웹훅에서 가져와 입력합니다.
가장 정확한 어트리뷰션을 위해 Data Store의 _fbp 및 _fbc 쿠키도 보고해야 합니다. 이 쿠키는 웹훅에서 사용할 수 있는 장바구니 토큰을 기준으로 Stape Store Lookup variable을 사용해 가져올 수 있습니다. 예시는 다음과 같습니다.
_fbp용 Stape Store Lookup variable은 Facebook 태그의 Browser ID 매개변수를 덮어써야 하며, _fbc용 Stape Store Lookup은 Click ID 매개변수를 덮어써야 합니다.
이 Facebook 태그는 transaction_id에 대한 Stape Store Lookup variable 확인 결과가 true와 같지 않은 값을 반환할 때 실행되도록 설정해야 합니다.
해당되는 경우 동일한 방법으로 동의 상태도 추가로 확인합니다.
결론
이 방법을 사용하면 Shopify 전환 추적 정확도를 100%로 높여 적절하게 어트리뷰션할 수 있는 전환을 놓치지 않을 수 있습니다. 필요한 모든 마케팅/분석 플랫폼으로 확장할 수 있으며, 2단계에서 필요한 모든 Cookie를 저장하기만 하면 됩니다. 그런 다음 5단계에서 TikTok, Snapchat, GA4, Google Ads 등의 추가 태그를 만들 수 있습니다. Data Store에서 가져온 쿠키 값으로 필요한 매개변수를 덮어쓰기만 하면 됩니다.
Google Ads와 같은 더 복잡한 플랫폼의 경우 Stape는 간단한 인증 프로세스를 갖춘 우수한 솔루션을 이미 제공하고 있습니다. 특정 요구 사항이 있다면 Google Ads Offline Conversion tracking tag 및 Conversion Adjustment tag 보고 기능을 이용할 수 있습니다.
궁금한 점이 있다면 언제든지 문의해 주세요.
서버 측 추적을 시작해 보시겠어요?
무료로 사용해 보세요
댓글