로그인
무료 체험 시작

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

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

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

Google Tag Assistant 페이지 확장 프로그램을 사용하여 페이지에 어떤 Google 태그가 로드되는지 테스트할 수도 있습니다. 하지만 Google Tag Assistant의 Troubleshoot tag 기능은 사용자 지정 픽셀과 호환되지 않고, 사용자 지정 픽셀이나 GTM에서 로드 중인 다른 픽셀에서 Google 태그를 감지하지 못합니다.

이 페이지의 정보

사용자 지정 픽셀 생성 준비

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

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

GTM(Google 태그 관리자) 사용자 지정 픽셀을 생성하여 타사 픽셀을 관리할 수 있습니다.

단계:

  1. Google 태그 관리자 계정을 열고 사용자 지정 픽셀을 설정할 계정을 선택합니다.
  2. 관리자를 클릭한 다음 Google 태그 관리자 설치를 클릭하여 설치 코드를 엽니다.
  3. 페이지의 head 섹션에 속하는 코드 블록을 복사합니다.
  4. 이 코드 블록에서 HTML 태그를 제거합니다. 예: <script></script>.
  5. 남은 코드를 새 Shopify 사용자 지정 픽셀에 삽입합니다.
  6. 고객 이벤트를 구독하고 GTM의 dataLayer를 푸시합니다.
  7. 코드가 표시되는 방식을 검토하려면 Google 태그 관리자 사용자 지정 픽셀 예시를 참고합니다.
  8. Google 태그 매니저를 구성하여 사용자 지정 픽셀의 이벤트를 수락합니다.
  9. 선택 사항: 기존 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 고객 이벤트 목록(Google 태그 관리자의 동급 고객 이벤트와 비교했을 때) 및 이벤트가 실행되는 데 필요한 트리거
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?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocations쿠폰
event.data?.checkout?.shippingLine?.price?.amount배송
event.data?.checkout?.totalTaxtax
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는 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(데이터) 교체

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의 측정값 개선 메트릭에 대해 동일한 추적을 달성할 수 있습니다.

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

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

Google Tag Assistant 페이지 확장 프로그램을 사용하여 페이지에 어떤 Google 태그가 로드되는지 테스트할 수도 있습니다. 하지만 Google Tag Assistant의 Troubleshoot tag 기능은 사용자 지정 픽셀과 호환되지 않고, 사용자 지정 픽셀이나 GTM에서 로드 중인 다른 픽셀에서 Google 태그를 감지하지 못합니다.

적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.