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

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

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

사용자 지정 픽셀의 생성 준비하기

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

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

단계

  1. Google 태그 관리자 계정을 열고 사용자 지정 픽셀을 설정할 계정을 선택합니다.
  2. 관리자를 클릭한 다음 Google 태그 관리자 설치를 클릭하여 설치 코드를 엽니다.
  3. 페이지의 head 섹션에 속하는 코드 블록을 복사합니다.
  4. 이 코드 블록에서 HTML 태그를 제거합니다.
  5. 나머지 코드를 새 Shopify 사용자 지정 픽셀에 삽입합니다.
  6. window.dataLayer = window.dataLayer || [];을 사용하여 dataLayer 개체를 초기화합니다.

사용자 지정 픽셀 코드는 다음과 같이 표시되어야 하고 GTM-XXXXXXX는 자체 GTM 컨테이너 ID와 일치해야 합니다.

(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');

window.dataLayer = window.dataLayer || [];

고객 이벤트에 적용 및 GTM의 DataLayer로 푸시

dataLayer.push() 호출을 Liquid 템플릿 파일에 추가하는 대신 모든 GTM dataLayer가 사용자 지정 픽셀 코드에서 작동됩니다.

기본적으로 즉시 적용할 수 있는 표준 사용자 지정 이벤트 세트가 있지만 Liquid 템플릿 파일에서 사용자 지정 이벤트를 직접 게시할 수도 있습니다.

다음은 다른 사람이 제품을 본 시점을 나타내는 표준 "product_viewed" 이벤트에 적용하는 예입니다. 이벤트가 트리거되면 이벤트를 dataLayer로 푸시합니다.

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

이 예에서는 Google 태그 관리자 변수를 사용하여 다른 태그로 보낼 수 있는 제품 이름에 대한 데이터가 전달됩니다.

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

이전에 Google 태그 관리자를 설정한 경우 dataLayer.push 호출을 Shopify.analytics.publish() 호출로 교체해야 합니다.

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

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

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

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

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

Google 태그 관리자 사용자 지정 픽셀의 예

아래 예는 GTM으로 데이터를 전송하는 방법을 표시하는 Google 태그 관리자 사용자 지정 픽셀의 간략한 버전입니다. dataLayer에 더 많은 이벤트를 푸시하기 위해 추가 표준 및 사용자 지정 이벤트에 적용할 수 있습니다.

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

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에 대한 매개 변수를 추가하고 값을 고객 픽셀에서 데이터 계층으로 전달한 것과 동일한 값으로 설정해야 합니다.

측정값 개선

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

테스트 및 디버그

  1. Chrome 브라우저에서 Shopify 스토어를 엽니다.
  2. 브라우저에서 네트워크 탭을 열고 데이터가 Google 태그 관리자에서 GA4로 전송되는 경우 GA4 측정 ID를 포함하는 collect?...라는 요청을 찾습니다.
  3. Google Analytics 계정에서 관리자를 클릭한 다음 디버그 보기를 클릭합니다.
  4. GA 디버그 Google 확장 프로그램이 Chrome 브라우저에 추가되었는지 확인합니다.
    • GA 디버그 사용을 설정합니다.
    • 별도의 탭에서 Shopify 스토어를 엽니다.
    • 디버그 보기에서 GA4로 돌아가 page_viewed 이벤트를 검토합니다.

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

무료 체험