Google 태그 관리자 사용자 지정 픽셀 생성

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

이 페이지에는 GTM(Google 태그 관리자)을 사용자 지정 픽셀로 사용하여 타사 픽셀을 관리하는 방법에 대한 지침이 포함되어 있습니다.

이 페이지의 정보

사용자 지정 픽셀 생성 준비
Google 태그 관리자 사용자 지정 픽셀 생성

사용자 지정 픽셀 생성 준비

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

Google 태그 관리자 계정을 생성하거나 열고 GTM 컨테이너 ID를 얻습니다.
보안을 위해 샌드박스에 로드된 태그 관리자는 다른 픽셀과 동일한 제한이 있습니다. 자세한 사항은 픽셀 샌드박스 제한 사항을 참조하십시오.

Google 태그 관리자 사용자 지정 픽셀 생성

단계:

Google 태그 관리자 계정을 열고 사용자 지정 픽셀을 설정할 계정을 선택합니다.
관리자를 클릭한 다음 Google 태그 관리자 설치를 클릭하여 설치 코드를 엽니다.
페이지의 head 섹션에 속하는 코드 블록을 복사합니다.
이 코드 블록에서 HTML 태그를 제거합니다. 예: <script></script>.
남은 코드를 새 Shopify 사용자 지정 픽셀에 삽입합니다.
고객 이벤트를 구독하고 GTM의 dataLayer를 푸시합니다.
코드가 표시되는 방식을 검토하려면 Google 태그 관리자 사용자 지정 픽셀 예시를 참고합니다.
Google 태그 매니저를 구성하여 사용자 지정 픽셀의 이벤트를 수락합니다.
선택 사항: 기존 dataLayer.push(event) 호출이 checkout.liquid 파일에 있는 경우 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 태그 관리자 변수를 사용하면 선택한 태그의 이벤트 페이로드에서 제품 이름을 캡처할 수 있습니다.

Google 태그 매니저 사용자 지정 픽셀의 예

아래는 Google 태그 관리자 사용자 지정 픽셀을 사용해 Google 태그 매니저에 데이터를 전송하는 방법을 보여주는 간략한 예입니다. 표준 및 사용자 지정 이벤트를 추가로 구독하면 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 태그 관리자를 구성하여 사용자 지정 픽셀의 이벤트 수락하기

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

선별된 표준 고객 이벤트 및 Google 태그 관리자의 해당 이벤트의 몇 가지 예는 다음 표에 나열되어 있습니다.

표준 Shopify 고객 이벤트 및 GTM의 해당 이벤트 목록
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	결제 완료	구매
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?.currencyCode`	`통화`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`쿠폰`
`event.data?.checkout?.shippingLine?.price?.amount`	`배송`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`품목`

다음 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 태그 관리자 트리거는 이벤트 이름이 checkout_completed인 사용자 지정 이벤트 유형입니다. 트리거의 이벤트 이름 필드는 사용자 지정 픽셀의 이벤트 키와 일치해야 합니다.

orderId 및 currency는 Google 태그 관리자에서 이벤트 데이터를 캡처하는 데 사용하는 변수입니다. Google 태그 관리자에서는 이 변수를 데이터 dataLayer로 매핑할 수 있습니다. 각 이벤트 변수에는 자체 데이터 dataLayer가 필요합니다. 모든 사용자 지정 이벤트에서 실행하려면 트리거를 설정합니다.

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

데이터 전송을 위해서는 Google 태그 매니저에 태그와 트리거가 1개 이상 설정되어 있어야 합니다.

기존 dataLayer.push(이벤트) 호출을 analytics.publish()로 교체

이전에 Google 태그 관리자를 설정한 경우 dataLayer.push 호출을 Shopify.analytics.publish() 호출로 대체해야 합니다. dataLayer.push 호출은 테마 편집기 레이아웃 섹션의 theme.liquid 파일에서 찾을 수 있습니다.

또한 checkout.liquid에서 dataLayer.push 호출도 교체해야 합니다. 그러나 checkout.liquid는 Checkout Extensibility과 호환되지 않으므로 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(데이터) 교체

Google 태그 관리자에는 모든 이벤트에서 상태 저장 dataLayer 개체를 푸시할 수 있는 기능이 있습니다. Shopify의 픽셀 샌드박스에 동등한 기능이 포함되어 있지 않지만 자체 데이터 개체를 생성하고 사용자 지정 이벤트로 전달하여 동일한 결과를 얻을 수 있습니다.

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

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

그런 다음, 사용자 지정 데이터를 포함할 때마다 게시 메서드로 전달합니다.

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

Google Analytics 4 설정 팁

Google 태그 관리자를 사용자 지정 픽셀로 사용할 때 Google Analytics 4(GA4) 설정에 대한 다음 팁을 고려하십시오.

페이지 URL 정리 기능

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

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_view 이벤트에서 트리거되는 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의 이벤트 이름 지정 개선과 일치하도록 이벤트 이름이 클릭인지 확인하여 링크 클릭을 GA4로 전송하는 GA4 태그를 생성합니다.

Google의 측정값 개선 메트릭에 대해 동일한 추적을 달성할 수 있습니다.

테스트 및 디버그

Chrome 브라우저에서 Shopify 스토어를 엽니다.
브라우저에 Google Tag Assistant Legacy Chrome 확장을 추가합니다.
확장 아이콘을 클릭한 다음 활성화를 클릭합니다.
사이트로 이동하여 테스트할 이벤트를 트리거합니다.
확장에서 Google 태그 관리자 태그를 클릭합니다. 그러면 트리거된 이벤트의 페이로드가 데이터 계층 섹션에 표시되어야 합니다.
Google 태그 관리자에서 로드한 다른 태그도 확장에 나열됩니다. 이 태그를 클릭하면 전송된 데이터를 검토할 수 있습니다.

Google 태그 관리자 사용자 지정 픽셀 생성

이 페이지의 정보

사용자 지정 픽셀 생성 준비

Google 태그 관리자 사용자 지정 픽셀 생성

단계:

고객 이벤트 구독 및 GTM의 데이터 계층으로 푸시

Google 태그 매니저 사용자 지정 픽셀의 예

Google 태그 관리자를 구성하여 사용자 지정 픽셀의 이벤트 수락하기

기존 dataLayer.push(이벤트) 호출을 analytics.publish()로 교체

기존 dataLayer.push(데이터) 교체

Google Analytics 4 설정 팁

페이지 URL 정리 기능

측정값 개선

테스트 및 디버그

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