사용자 지정 픽셀 코드의 생성

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

이 페이지에는 특정 고객 이벤트를 추적하기 위한 타사 픽셀용 사용자 지정 픽셀 코드를 생성하는 지침이 포함되어 있습니다. 사용자 지정 픽셀용 코드를 생성한 후에는 이 픽셀을 Shopify 스토어에 추가할 수 있습니다.

이 페이지의 정보

사용자 지정 픽셀 생성 준비

사용자 지정 픽셀을 생성하기 전에 다음 정보를 검토하여 픽셀 구성 방법을 파악하십시오.

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

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

사용자 지정 픽셀용 코드 생성

사용자 지정 픽셀용 코드를 생성하려면 다음 단계를 사용합니다.

  1. 타사 Javascript SDK를 준비합니다.
  2. 픽셀을 구성하여 고객 이벤트를 추적합니다.

타사 Javascript SDK 준비

스토어가 사용하는 타사 서비스는 픽셀과 통합된 코드를 제공합니다. 픽셀에는 보통 Javascript SDK와 추적 코드, 2개의 구성 요소가 포함됩니다. Shopify 픽셀 샌드박스는 JavaScript만 지원하므로 타사 서비스 코드의 HTML을 제거해야 합니다.

다음은 Meta 픽셀의 예시입니다. 타사 픽셀은 회사별로 조금씩 차이가 있습니다.

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

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

script src=를 사용하여 로드된 픽셀이 있을 수 있습니다. Shopify 픽셀에서는 HTML이 지원되지 않으므로 script src=는 JavaScrpit에 해당하는 요소로 대체해야 합니다.

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

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

고객 이벤트 추적

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

표준 이벤트 구독

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

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

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

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

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

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

사용자 지정 고객 이벤트 구독

추가적인 고객 이벤트를 추적하려면(예: 사용자가 버튼을 클릭하는 이벤트 등) 사용자 지정 고객 이벤트를 추가할 수 있습니다. 사용자 지정 이벤트는 표준 이벤트와 동일한 방식으로 구독할 수 있습니다. 구독할 이벤트 이름을 지정하고 타사 서비스 공급업체의 픽셀에 이 정보를 전달하십시오.

다음은 게시된 사용자 지정 이벤트가 스토어의 테마 Liquid 파일에 표시되는 예제입니다.

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

다음은 위의 사용자 지정 이벤트를 구독하도록 픽셀을 구성하는 방법의 예제입니다.

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

사용자 지정 이벤트의 자세한 내용은 Shopify 개발자 문서를 참조하십시오.

웹 픽셀은 동의가 필요하도록 구성한 마켓에서 방문자가 마케팅 및 분석 목적으로 동의를 제공한 경우에만 실행됩니다. 각 픽셀의 이름은 목적에 따라 각각 다를 수 있습니다. 픽셀 설명서를 참조하여 픽셀을 Shopify의 정의로 매핑하는 방법을 파악해야 합니다.

예를 들어 마케팅 및 분석 목적을 Google의 동의 모드로 매핑하는 방법은 다음과 같습니다.

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

사용자 지정 픽셀 예시

다음은 Meta 픽셀의 코드 예시입니다. Pixel 코드는 타사 서비스 공급업체 및 추적하려는 이벤트에 따라 달라집니다. 사용 가능한 이벤트 목록은 고객 이벤트 참조를 참조하십시오.

사용자 지정 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);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

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

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

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

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

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});

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

무료 체험