도움말
로그인

Google Tag Manager 사용자 지정 픽셀 생성

Google Tag Manager(GTM)를 사용자 지정 픽셀로 사용하여 타사 픽셀을 관리할 수 있습니다.

GTM 사용자 지정 픽셀을 테스트할 준비가 되면 Shopify Pixel Helper를 사용하여 추적하려는 모든 이벤트가 오류 없이 샌드박스에 추가되는지 확인하십시오.

Google Tag Assistant 페이지 확장 프로그램을 사용하여 페이지에 로드되는 Google 태그를 테스트할 수도 있습니다. 그러나 Google Tag Assistant의 태그 문제 해결 기능은 사용자 지정 픽셀과 호환되지 않으며, 사용자 지정 픽셀의 Google 태그나 GTM으로 로드되는 다른 픽셀을 감지하지 않습니다.

이 페이지의 내용

사용자 지정 픽셀 생성 준비

Google Tag Manager를 사용하여 사용자 지정 픽셀을 생성하기 전에 다음 정보를 검토하여 픽셀 구성 방법을 이해했는지 확인하십시오.

Google Tag Manager 사용자 지정 픽셀 생성

Google Tag Manager 사용자 지정 픽셀을 생성하여 타사 픽셀을 관리할 수 있습니다.

단계:

  1. Google Tag Manager 계정을 열고 사용자 지정 픽셀을 설정할 계정을 선택합니다.
  2. 관리자를 클릭한 다음 Google Tag Manager 설치를 클릭하여 설치 코드를 엽니다.
  3. 페이지의 head 섹션에 속하는 코드 블록을 복사합니다.
  4. 코드 블록에서 HTML 태그를 제거합니다. 예: <script></script>.
  5. 나머지 코드를 새 Shopify 사용자 지정 픽셀에 삽입합니다.
  6. 고객 이벤트를 구독하고 GTM의 dataLayer로 푸시합니다.
  7. 코드가 표시되는 방식을 검토하려면 Google Tag Manager 사용자 지정 픽셀 예시를 참조하십시오.
  8. 사용자 지정 픽셀의 이벤트를 수락하도록 Google Tag Manager를 구성합니다.
  9. 선택 사항: checkout.liquid 파일에 기존 dataLayer.push(이벤트) 호출이 있는 경우 analytics.publish()로 교체하십시오.

고객 이벤트를 구독하고 GTM의 데이터 레이어로 푸시하기

사용자 지정 픽셀 코드에서 GTM dataLayer를 사용하여 고객 이벤트를 구독할 수 있습니다.

기본적으로 구독할 수 있는 표준 이벤트 세트가 있습니다. 하지만 표준 이벤트에서 제공되지 않는 고객 이벤트를 추적하려는 경우, Liquid 템플릿 파일에서 자신만의 사용자 지정 이벤트를 게시할 수 있습니다.

다음은 누군가 제품을 볼 때를 나타내는 표준 “product_viewed” 이벤트를 구독하는 예입니다. 이벤트가 트리거되면 이벤트가 dataLayer로 푸시됩니다.

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    product_title: event.data?.productVariant?.title,
  });
});

이 예에서는 이벤트 페이로드에 제품 이름이 전달됩니다. Google Tag Manager 변수를 사용하여 선택한 태그의 이벤트 페이로드에서 제품 이름을 캡처할 수 있습니다.

Google Tag Manager 사용자 지정 픽셀 예시

아래 예시는 Google Tag Manager로 데이터를 보내는 방법을 보여주는 Google Tag Manager 사용자 지정 픽셀의 간소화된 버전입니다. dataLayer에 더 많은 이벤트를 푸시하려면 더 많은 표준 및 사용자 지정 이벤트를 구독할 수 있습니다.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

사용자 지정 픽셀의 이벤트를 수락하도록 Google Tag Manager 구성하기

사용자 지정 픽셀을 생성한 후에는 사용자 지정 픽셀의 이벤트를 수락하도록 Google Tag Manager를 구성해야 합니다. 이를 위해 Google Tag Manager에 태그, 트리거, dataLayer 변수가 필요합니다.

일부 표준 고객 이벤트 및 이에 상응하는 Google Tag Manager의 몇 가지 예가 다음 표에 나와 있습니다.

픽셀과 함께 사용할 표준 Shopify 고객 이벤트 목록으로, Google Tag Manager의 해당 고객 이벤트와 비교하고 이벤트 발생에 필요한 트리거를 포함합니다.
Shopify 이벤트트리거GTM 이벤트
payment_info_submitted결제 정보 제출add_payment_info
checkout_address_info_submitted배송 정보 제출add_shipping_info
product_added_to_cart쇼핑 카트에 품목 추가add_to_cart
checkout_started체크아웃 시작begin_checkout
checkout_completed체크아웃 완료purchase
product_removed_from_cart카트에서 품목 제거remove_from_cart
cart_viewed쇼핑 카트 보기view_cart
product_viewed제품 세부 정보 페이지 보기view_item
collection_viewed품목 목록 보기view_item_list

사용자 지정 픽셀 dataLayer 이벤트가 처리되려면 GTM 태그 이벤트 매개 변수가 예상되는 이름 지정 규칙과 일치해야 합니다.

일부 사용자 지정 픽셀 dataLayer 이벤트 속성과 이에 상응하는 Google Analytics 4(GA4) 이벤트 매개 변수의 몇 가지 예는 다음과 같습니다.

GA4 이름 지정 규칙을 사용하는 사용자 지정 픽셀 dataLayer 이벤트 목록
사용자 지정 픽셀 dataLayer 이벤트GA4 이벤트 매개 변수
event.data?.checkout?.currencyCodecurrency
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationscoupon
event.data?.checkout?.shippingLine?.price?.amountshipping
event.data?.checkout?.totalTaxtax
event.data?.checkout?.lineItemsitems

다음은 checkout_completed 이벤트를 사용하는 예입니다.

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Google Tag Manager 트리거는 이벤트 이름이 checkout_completed인 사용자 지정 이벤트 유형입니다. 트리거의 이벤트 이름 필드는 사용자 지정 픽셀의 event 키와 일치해야 합니다.

orderId 및 currency는 Google Tag Manager에서 이벤트의 데이터를 캡처하는 데 사용하는 변수입니다. 이러한 변수는 Google Tag Manager의 dataLayer 변수에 매핑할 수 있습니다. 각 이벤트 변수에는 자체 dataLayer 변수가 필요합니다. 모든 사용자 지정 이벤트에서 트리거가 실행되도록 설정하십시오.

방금 생성한 트리거를 사용하는 태그를 생성합니다. 이벤트 매개변수 아래에 캡처하려는 변수를 추가합니다. 위 예에서 orderId, currency, price, shippingLine, totalTax는 dataLayer 변수로 설정됩니다. 태그가 실행될 때마다 이벤트와 함께 이러한 dataLayer 변수가 캡처됩니다.

데이터 전송이 이루어지려면 Google Tag Manager에서 하나 이상의 태그와 트리거를 설정해야 한다는 점에 유의하십시오.

기존 dataLayer.push(event) 호출을 analytics.publish()로 바꾸기

이전에 Google Tag Manager를 설정한 경우 dataLayer.push 호출을 Shopify.analytics.publish() 호출로 바꿔야 합니다. dataLayer.push 호출은 테마 편집기의 레이아웃 섹션에 있는 theme.liquid 파일에서 찾을 수 있습니다.

또한 checkout.liquid에서 dataLayer.push 호출을 바꿔야 합니다. 그러나 checkout.liquid는 Shopify Extensions와 호환되지 않으므로 UI 확장을 사용하여 웹 픽셀에 데이터를 푸시해야 합니다.

다음은 theme.liquid 파일에서 dataLayer를 사용하여 추적되는 사용자 지정 이메일 등록 이벤트의 단순화된 예입니다.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Shopify에 상응하는 코드는 다음과 같으며, 데이터를 사용자 지정 픽셀로 푸시합니다.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

그런 다음 사용자 지정 픽셀 코드에 다음과 같은 코드를 추가합니다.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

기존 dataLayer.push(data) 바꾸기

Google Tag Manager에는 모든 이벤트에서 상태 저장 dataLayer 개체를 푸시할 수 있는 기능이 있습니다. Shopify의 픽셀 샌드박스에는 이에 상응하는 기능이 없지만, 자체 데이터 개체를 생성하여 사용자 지정 이벤트에 전달하면 동일한 결과를 얻을 수 있습니다.

예를 들어, 사용자 지정 이벤트를 게시하기 전에 “customData” 개체를 정의합니다.

<script>
  const customData = {email: customer.email}
</script>

그런 다음 사용자 지정 데이터를 포함하려는 경우 게시 메서드에 전달합니다.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Google Analytics 4 설정 팁

Google Tag Manager를 사용자 지정 픽셀로 사용하는 경우 다음 팁을 참고하여 Google Analytics 4(GA4)를 설정하십시오.

더 깔끔한 페이지 URL

GA4가 샌드박스에서 실행되는 경우 페이지 URL에 작동 중인 샌드박스에 대한 정보가 포함되어 있음을 확인할 수 있습니다. 해당 URL에서 샌드박스 정보를 제거하려면 GA4의 자동 페이지 추적을 끄고 대신 표준 page_viewed 이벤트를 사용하여 자체적으로 구현할 수 있습니다.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

dataLayer에 자체 이벤트를 게시한 후 page_viewed 이벤트에서 트리거되는 GA4 page_view 태그를 생성할 수 있습니다. 가장 일반적으로 Google Analytics: GA4 이벤트 태그 유형을 사용하고 이벤트 이름을 page_view로 설정할 수 있습니다. 태그 유형과 이벤트 이름을 설정한 후에는 page_location에 대한 매개변수를 추가하고 값을 사용자 지정 픽셀에서 dataLayer로 전달한 것과 동일한 값으로 설정해야 합니다.

향상된 측정

Shopify의 픽셀 샌드박스 내에서 GA4를 로드할 때 일반적으로 자동으로 유추되는 일부 이벤트는 수동으로 설정해야 합니다. 예를 들어, GA4의 향상된 측정 설정의 일부인 외부 링크 클릭은 사용자 지정 픽셀을 사용할 때 보안상의 이유로 자동으로 트리거될 수 없습니다. 그러나 GA4의 향상된 측정 이벤트를 사용자 지정 이벤트로 직접 구현할 수 있습니다.

아래에 제공된 코드는 외부 링크 클릭 추적의 단순화된 예입니다.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

마지막으로 GTM에서 GA4의 향상된 이벤트 이름 지정과 일치하도록 이벤트 이름을 click으로 설정하여 GA4에 링크 클릭을 전송하는 GA4 태그를 생성합니다.

Google의 향상된 측정 지표에 대해 동일한 추적을 수행할 수 있습니다.

사용자 지정 픽셀 테스트 및 디버그

GTM 사용자 지정 픽셀을 테스트할 준비가 되면 Shopify Pixel Helper를 사용하여 추적하려는 모든 이벤트가 오류 없이 샌드박스에 추가되는지 확인하십시오.

Google Tag Assistant 페이지 확장 프로그램을 사용하여 페이지에 로드되는 Google 태그를 테스트할 수도 있습니다. 그러나 Google Tag Assistant의 태그 문제 해결 기능은 사용자 지정 픽셀과 호환되지 않으며, 사용자 지정 픽셀의 Google 태그나 GTM으로 로드되는 다른 픽셀을 감지하지 않습니다.