사용자 지정 픽셀 추가

데이터를 수집하려는 특정 고객 이벤트를 추적하는 앱이 없는 경우 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,
  });
});

사용자 지정 픽셀 추가

사용자 지정 픽셀을 추가하기 전에 기존 픽셀을 제거하여 고객 이벤트가 두 번 계산되지 않도록 합니다. 기존 픽셀 코드는 모든 장소(예:theme.liquid,checkout.liquid(Plus 판매자만 해당) 및 기타 결제 스크립트)에서 수동으로 제거해야 합니다.

  1. Shopify 관리자에서 설정 > 고객 이벤트로 이동합니다.
  2. 픽셀에 고유한 이름을 지정합니다. 이미 존재하는 사용자 지정 픽셀의 이름을 입력하면 픽셀에 다른 이름을 지정하라는 메시지가 표시됩니다.
  3. 픽셀 추가를 클릭하여 이벤트 편집기를 엽니다.
  4. 타사 JavaScript 픽셀을 코드 창에 붙여넣습니다.
  5. 적절한 스키마에서 추적할 이벤트를 추가합니다.
  6. 선택 사항: 추가 작업을 클릭하여 픽셀 이름을 편집하거나 사용자 지정 픽셀에 대한 지원을 받기 위해 Shopify Expert를 고용하는 방법에 대한 정보를 볼 수 있습니다.
  7. 저장을 클릭하여 사용자 지정 픽셀을 저장합니다. 사용자 지정 픽셀을 지금 연결할 준비가 되면 픽셀 연결을 클릭하여 이벤트 추적을 시작할 수 있습니다.

사용자 지정 픽셀 연결

사용자 지정 픽셀이 추가된 후에는 픽셀을 스토어에 연결해야 합니다.

  1. Shopify 관리자의 고객 이벤트 페이지에서 사용자 지정 픽셀을 클릭합니다.
  2. 현재 연결되지 않은 사용자 지정 픽셀은 연결 해제된 픽셀이라는 제목 아래에 표시됩니다. 적절한 사용자 지정 픽셀 선에서 연결을 클릭합니다.
  3. Shopify 서비스 약관을 검토합니다. 픽셀이 서비스 요구 사항을 충족하는 경우 연결을 클릭합니다.

사용자 지정 픽셀 예제

사용자 지정 메타 픽셀

​​!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);

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

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

analytics.subscribe("search_submitted", event => {
  fbq('track', 'Search', {
    search_string: event.search_value
  });
});

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

사용자 지정 픽셀 연결 해제

사용자 지정 픽셀을 추가한 이벤트의 추적을 중지하려면 온라인 스토어에서 픽셀의 연결을 수동으로 해제해야 합니다.

단계:

  1. Shopify 관리자의 고객 이벤트 페이지에서 사용자 지정 픽셀을 클릭합니다.
  2. 현재 연결된 사용자 지정 픽셀이 사용자 지정 픽셀 목록 상단에 표시됩니다. 적절한 사용자 지정 픽셀 선에서 연결 해제를 클릭합니다. 픽셀 연결을 해제해도 픽셀이 삭제되지는 않습니다.

사용자 지정 픽셀 삭제

더 이상 필요하지 않는 사용자 지정 픽셀을 삭제할 수 있습니다.

단계:

  1. Shopify 관리자의 고객 이벤트 페이지에서 사용자 지정 픽셀을 클릭합니다.
  2. 적절한 사용자 지정 픽셀 선에서 ... 버튼을 클릭합니다.
  3. 삭제를 클릭합니다. 삭제를 확인하면 픽셀 관리자에서 사용자 지정 픽셀이 제거됩니다.

사용자 지정 픽셀 삭제는 실행 취소할 수 없으므로 적절한 픽셀을 삭제해야 합니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험