사용자 지정 픽셀 추가

이 페이지는 Aug 15, 2022에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/promoting-marketing/pixels/custom-pixels/creating-custom-pixels에서 확인하십시오.

데이터를 수집하려는 특정 고객 이벤트를 추적하는 앱이 없는 경우 Lax 샌드박스 환경에서 실행되는 사용자 지정 픽셀을 추가할 수 있습니다.

사용자 지정 픽셀을 추가하는 경우 다음 정보를 지정합니다.

타사 JavaScript 픽셀
추적하려는 행동 이벤트

타사 픽셀 코드 준비

작업하는 타사 서비스는 픽셀과 통합된 코드를 제공합니다. 픽셀에는 일반적으로 SDK와 추적 코드라는 두 가지 구성 요소가 있습니다. Shopify 픽셀 샌드박스는 JavaScript만 지원하므로 타사 서비스 코드의 HTML을 제거해야 합니다.

메타 픽셀의 예는 다음과 같습니다. 픽셀은 회사별로 약간 다릅니다.

<!-- Meta Pixel Code -->
<script>
!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');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

메타 코드에서 HTML을 제거하면 메타의 픽셀 SDK와 초기화 코드가 남습니다. PageView 이벤트 추적 코드도 제거되었습니다. 이는 다음 단계에서 추가될 예정입니다.

!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');
fbq('init', YOUR_PIXEL_ID);

script src=를 사용하면 로드된 픽셀이 표시될 수 있습니다. HTML은 Shopify의 픽셀에서 지원되지 않으므로 JavaScript에 해당하는 요소로 바꾸어야 합니다.

샘플 Google Analytics 픽셀은 다음과 같습니다.

<!-- 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>

script src= 부분은 다음 JavaScript 요소로 바꿀 수 있습니다. src 속성이 HTML 버전과 일치하는지 항상 확인하십시오.

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');

표준 이벤트 구독

픽셀의 SDK를 로드하고 초기화한 후 추적을 위해 이벤트를 해당 SDK로 전달해야 합니다. 이벤트를 구독한 후 이벤트 데이터를 타사 서비스에서 처리할 수 있도록 픽셀의 SDK로 전달하면 됩니다.

Shopify는 픽셀이 필요한 데이터를 쉽게 수집할 수 있게 해주는 표준 이벤트 세트를 제공합니다.

Shopify 픽셀 확장 API를 사용하여 이벤트를 구독할 수 있습니다.구독하는 이벤트와 관련된 타사 픽셀 코드를 입력해야 합니다.

메타 픽셀의 PageView 이벤트에 대한 예는 다음과 같습니다. fbq("track")는 메타 코드의 일부이며 각 회사마다 자체 버전이 있으므로 해당 문서를 참조해야 합니다.

analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

일부 이벤트에는 픽셀에 전달할 수 있는 메타데이터가 있습니다. 일부 제품 세부 정보를 메타의 ViewContent 이벤트로 전달하는 예는 다음과 같습니다

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});