사용자 지정 픽셀 코드 생성

주의

사용자 지정 픽셀은 고급 기능으로 JavaScript 지식이 필요합니다. 관련 법률 준수, 동의, 코드 보안, 문제 해결 및 업데이트는 판매자님의 책임입니다. 픽셀에는 Shopify 서비스 약관이 적용됩니다.

Shopify에서는 사용자 지정 픽셀의 추가 및 사용을 지원하지 않습니다. 사용자 지정 픽셀을 추가하거나 사용하는 데 도움이 필요한 경우 Shopify 파트너를 고용할 수 있습니다.

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

참고

사용자 지정 픽셀을 생성하기 전에 향상된 안정성, 보안 및 실적을 위해 사용 가능한 앱을 검토해야 합니다. 그러나 요구 사항에 맞는 앱이 없는 경우 사용자 지정 픽셀을 생성할 수 있습니다.

사용자 지정 픽셀 생성 준비

사용자 지정 픽셀을 생성하기 전에 다음 정보를 검토하여 픽셀 구성 방법을 이해해야 합니다.

• 픽셀과 관련된 위험.
• Shopify 픽셀 샌드박스의 제한 사항.
• Shopify 픽셀 샌드박스 API 사용.
• 고객 이벤트 추적 스키마.

사용자 지정 픽셀을 추가할 때 다음 정보를 지정합니다.

• 타사 JavaScript 픽셀.
• 추적하려는 행동 이벤트.
• 고객 개인정보 보호 동의 설정.

사용자 지정 픽셀 코드 생성

비즈니스 성장시키기

이 튜토리얼은 고급 튜토리얼이며 Shopify에서 지원하지 않습니다. 사용자 지정 픽셀을 추가하는 데 도움이 필요한 경우 Shopify 파트너를 고용할 수 있습니다.

사용자 지정 픽셀 코드를 생성하려면 다음 단계를 따르십시오.

1. 타사 Javascript SDK 준비.
2. 픽셀이 고객 이벤트를 추적하도록 구성합니다.
3. 픽셀에 대한 고객 개인정보 보호 동의 설정을 구성합니다.

타사 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 -->

Meta의 코드에서 HTML을 제거하면 Meta의 픽셀 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의 픽셀 SDK는 Shopify 사용자 지정 픽셀의 데이터를 자동으로 전송하지 않습니다. 데이터를 전송하려면 이벤트를 구독해야 합니다.

script src=를 사용하여 로드되는 픽셀을 접할 수 있습니다. Shopify 픽셀에서는 HTML이 지원되지 않으므로 script src=를 JavaScript에 상응하는 코드로 교체해야 합니다.

다음은 script src=를 사용하여 로드되는 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의 픽셀 SDK는 Shopify 사용자 지정 픽셀의 데이터를 자동으로 전송하지 않습니다. 데이터를 전송하려면 이벤트를 구독해야 합니다.

고객 이벤트 추적

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

표준 이벤트 구독

Shopify는 표준 이벤트 세트를 제공하므로 픽셀이 필요한 데이터를 쉽게 수집하도록 할 수 있습니다.

Shopify Pixels Extension API를 사용하여 이벤트를 구독할 수 있습니다. 구독하려는 이벤트와 함께 타사 픽셀 코드를 배치해야 합니다.

다음은 Meta 픽셀의 PageView 이벤트 예시입니다. fbq("track")는 Meta 코드의 일부이며, 각 회사마다 자체 버전이 있으므로 해당 설명서를 참조해야 합니다.

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

일부 이벤트에는 픽셀로 전달할 수 있는 메타데이터가 있습니다. 다음은 일부 제품 세부 정보를 Meta의 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 플랫폼을 사용하여 제품을 판매하려면 판매자의 비즈니스 및 고객이 속한 관할권의 법률, Shopify 서비스 약관, Shopify 허용되는 사용 정책 및 기타 모든 해당 정책을 준수해야 합니다. 고객 개인정보에 대해 자세히 알아보십시오.

동의가 필요한 것으로 구성된 시장(예: 유럽 경제 지역(EEA) 및 영국)에서는 웹사이트 방문자가 픽셀 구성에 필요한 권한을 제공한 경우에만 웹 픽셀이 실행됩니다.

기본적으로 새 사용자 지정 픽셀에는 마케팅 및 분석 권한이 필요합니다. 사용자 지정 픽셀 세부 정보의 고객 개인정보 > 권한 섹션에서 필요한 권한을 사용자 지정할 수 있습니다.

마찬가지로, 데이터 판매로 구성된 픽셀은 픽셀이 제한된 데이터 사용을 지원하지 않는 한 데이터 판매 또는 공유를 거부한 고객에 대해서는 실행되지 않습니다. 기본적으로 새 사용자 지정 픽셀은 데이터 판매로 간주됩니다. 사용자 지정 픽셀 세부 정보의 고객 개인정보 > 데이터 판매 섹션에서 수집된 데이터가 데이터 판매에 해당하는지 여부를 사용자 지정할 수 있습니다.

사용자 지정 픽셀 개발자는 동의 수집 및 등록에 대해 자세히 알아볼 수 있습니다.

각 픽셀은 용도에 따라 이름이 다를 수 있습니다. Shopify의 정의에 매핑되는 방식을 이해하려면 타사의 픽셀 설명서를 참조해야 합니다.

예를 들어, 다음은 마케팅 및 분석 목적이 Google의 동의 모드에 매핑되는 방식입니다.

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

사용자 지정 픽셀 예시

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

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