사용자 지정 픽셀 테스트하기

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

사용자 지정 픽셀을 생성한 후 사이트에서 이벤트가 발생하면 픽셀에서 데이터를 올바르게 전송하고 있는지 테스트해야 합니다.

Shopify Pixel Helper를 사용하여 픽셀 이벤트 로드 여부와 Shopify 이벤트에 제대로 구독했는지 여부를 테스트할 수 있습니다. Shopify Pixel Helper를 사용하면 온라인 스토어에서 사용자 지정 픽셀을 테스트하여 해당 이벤트의 데이터와 함께 실시간으로 수신되는 이벤트를 볼 수 있습니다.

귀하의 사용자 지정 픽셀이 자체 픽셀 지원 도우미가 있는 타사 플랫폼과 통합된 경우 Shopify Pixel Helper 외에도 타사 픽셀 도우미를 사용하여 픽셀 이벤트가 타사 플랫폼에서 처리되고 수신되고 있는지 테스트할 수 있습니다. 예를 들어 스토어에 사용자 지정 TikTok 픽셀을 추가하는 경우 Shopify Pixel Helper와 TikTok 픽셀 도우미를 모두 사용하여 픽셀을 테스트할 수 있습니다.

타사 픽셀 도우미와 동일한 브라우저 세션에서 Shopify Pixel Helper를 사용하여 두 플랫폼의 이벤트를 동시에 테스트할 수 있습니다.

다음은 모든 표준 이벤트를 샌드박스에 실행하고 이벤트 데이터를 콘솔에 기록하는 사용자 지정 픽셀 스크립트입니다. 표준 이벤트는 Shopify Pixel Helper에 표시됩니다. 또한, 기타 대량 가입인 all_events, all_custom_events 및 all_dom_events에 가입하여 웹 픽셀이 제공할 수 있는 모든 것을 살펴볼 수 있습니다. 자세한 내용은 웹 픽셀 API를 방문하세요.

analytics.subscribe("all_standard_events", event => {
console.log("Event data ", event?.data);
});

이 페이지의 정보

사용자 지정 픽셀이 연결되어 있는지 확인

사용자 지정 픽셀을 테스트하기 전에 사용자 지정 픽셀이 연결되어 있는지 확인합니다.

단계:

  1. Shopify Admin에서 설정 > 고객 이벤트로 이동합니다.
  2. 테스트하려는 픽셀 옆에서, 상태 열에 픽셀이 연결됨 상태로 표시되는지 확인합니다.
  3. 픽셀이 연결되어 있지 않은 경우 ...를 클릭한 다음 연결을 클릭합니다.

Shopify Pixel Helper를 사용하여 사용자 지정 픽셀 테스트

사용자 지정 픽셀이 연결되었는지 확인한 후 Shopify Pixel Helper를 사용하여 사용자 지정 픽셀이 데이터를 발신하고 스토어 데이터를 수신하는지 여부를 테스트할 수 있습니다. 사용자 지정 픽셀은 한 번에 하나씩 테스트할 수 있습니다.

단계:

  1. Shopify Admin에서 설정 > 고객 이벤트로 이동합니다.
  2. 테스트할 사용자 지정 픽셀을 클릭합니다.
  3. 테스트를 클릭하여 테스트용 웹사이트에서 사용자 지정 픽셀을 엽니다.

  4. 선택 사항: 스토어의 동의 설정 및 사용자 지정 픽셀의 고객 개인정보 보호 설정에 따라 Pixel Helper 대화 상자에 픽셀이 동의를 기다리고 있습니다라고 표시될 수 있습니다. 테스트를 계속 진행하려면 다음 중 하나를 수행하세요.

    • 스토어의 쿠키 배너 또는 기본 설정에 대한 추적을 동의합니다.
    • 동의하고 테스트를 계속합니다를 클릭합니다.
    • 아직 픽셀이 로드되지 않은 경우 고객 개인정보 보호 설정을 검토하세요.

  5. 로드 중인 이벤트를 확인하려면 픽셀을 테스트할 각 페이지를 방문하고 Pixel Helper 대화 상자를 검토하여 수신한 이벤트 섹션에서 이벤트가 가입되어 있으며 콜백 함수가 성공적으로 실행되었는지 확인합니다.

    • 새 페이지로 이동하여 page_viewed 이벤트를 테스트합니다.
    • 제품을 클릭하여 product_viewed 이벤트를 테스트합니다.
    • 카트에 제품을 추가하여 product_added_to_cart 이벤트를 테스트합니다.
    • 결제 화면으로 이동하여 checkout_started 이벤트를 테스트합니다.
    • 결제 시 배송 정보를 입력하여 checkout_shipping_info_submitted 이벤트가 checkout_started 이벤트를 대체하는지 테스트합니다.
    • 결제를 완료하여 checkout_completed 이벤트가 checkout_shipping_info_submitted 이벤트를 대체하는지 테스트합니다. 테스트 주문 수행에 대해 자세히 알아보세요.

  6. 수신한 이벤트 데이터를 확인하려면 최대화 버튼을 클릭하여 픽셀 도우미 대화 상자를 펼칩니다.

수신한 이벤트 섹션 보기

5단계에서 로드 중인 이벤트를 테스트하면 Pixel Helper 대화 상자의 수신한 이벤트 섹션에 다음 상태 중 하나가 표시됩니다.

  • 녹색 점은 이벤트가 성공적으로 가입되어 콜백 함수가 성공적으로 실행되었다는 것을 나타냅니다.
  • 빨간 점은 이벤트가 성공적으로 가입되었지만 콜백 함수가 실패했다는 것을 나타냅니다. 사용자 지정 픽셀 문제를 해결하는 방법을 알아보세요.

사용자 지정 픽셀 문제 해결하기

픽셀이 테스트 중에 로드되거나 실행되지 않고 이벤트 데이터 및 픽셀 코드에 오류가 있는지 이미 검토한 경우 다음 문제 해결 방법을 시도하세요.

고객 개인정보 보호 설정 검토

픽셀이 테스트 중에 로드되거나 실행되지 않을 경우 픽셀이 로드되지 않도록 하는 고객 개인정보 보호 설정이 있을 수 있습니다.

Shopify 관리자에서 설정 > 고객 개인정보 보호로 이동하여 세션에 적용될 수 있는 Shopify 관리자의 고객 개인정보 보호 설정을 확인합니다. 고객 개인정보 보호 설정에 따라 다음 단계를 수행합니다.

  • 귀하의 지역에서 동의가 필요한 고객 개인정보 보호 설정이 있는 경우 쿠키 배너를 통해 동의를 제공했는지 확인합니다.
  • 픽셀을 로드하지 못하게 차단하는 고객 개인정보 보호 설정이 없는 경우 브라우저의 쿠키를 지워서 쿠키 배너를 재설정하고 동의를 제공하세요.

타사 도구를 사용하여 동의를 관리하는 경우 지원을 받으려면 타사 공급업체에 문의하세요.

추가 문제 해결

사용자 지정 픽셀이 고객 이벤트에 적절하게 가입되어 있는지 여부가 여전히 불확실한 경우 다음 문제 해결 조치를 시도해 보세요.

  • 브라우저의 쿠키를 지웁니다.
  • 표준 이벤트를 테스트 중인 경우 Shopify의 표준 이벤트 설명 개발자 설명서를 검토하여 이벤트를 트리거하기 위한 필수 단계를 수행 중인지 확인하세요.

타사 픽셀 도우미 테스트하기

픽셀 SDK(소프트웨어 개발 키트)에는 고객 행동에 대한 정보를 수집하는 픽셀에 대한 도구가 포함되어 있습니다. 타사 픽셀 공급업체의 픽셀 도우미를 사용하여 픽셀의 다음 동작을 테스트하고 픽셀 SDK가 올바르게 작동하는지 확인할 수 있습니다.

타사 픽셀 SDK가 로드되어 있는지 테스트

네트워크 탭을 확인하는 단계는 사용하는 웹 브라우저에 따라 다를 수 있습니다. 예를 들어, Google Chrome에서 네트워크 탭을 확인하는 방법을 알아보려면 개발자용 Chrome 네트워크 활동 조사 문서를 참조하세요.

타사 픽셀 SDK가 로드되어 있는지 테스트하려면 SDK URL에 대한 타사 공급업체의 코드를 검색하여 해당 코드를 픽셀 코드에 추가할 수 있도록 해야 합니다. 지원을 받으려면 타사 픽셀 공급업체에 문의하세요.

단계:

  1. Shopify 관리자에서 설정 > 고객 이벤트로 이동합니다.
  2. 테스트할 사용자 지정 픽셀을 클릭합니다.
  3. 코드 섹션에 타사 공급업체가 제공한 픽셀 SDK를 픽셀 코드 마지막에 입력합니다.
  4. 저장을 클릭합니다.
  5. 온라인 스토어를 방문한 다음 네트워크 탭을 확인하여 타사 공급업체의 SDK URL이 다운로드되고 있는지 확인합니다.
  6. 선택 사항: 타사 픽셀 SDK가 로드되지 않는 경우 샌드박스에서 JavaScript 런타임 오류를 확인하세요. 예를 들어 Chrome에서 특정 iFrame을 선택하여 콘솔 로그를 검토한 다음 테스트 중인 특정 픽셀로 로그 범위를 좁힐 수 있습니다. Chrome에서 JavaScript 런타임 오류를 확인하는 것에 대한 자세한 내용은 Chrome의 JavaScript 디버그 문서를 참조하세요.

테스트 중에 타사 픽셀 SDK가 로드되지 않는 경우 지원을 받으려면 타사 픽셀 공급업체에 문의하세요.

기타 타사 픽셀 SDK 테스트하기

타사 픽셀 SDK가 초기화되었는지 또는 이벤트를 수집 중인지 테스트하려면 타사 픽셀 공급업체의 문서를 참조하세요.

픽셀 SDK에서 이벤트를 수집하는지 여부를 테스트하려면 브라우저의 네트워크 탭을 확인하라는 지시를 받을 수 있습니다. 네트워크 탭을 확인하는 단계는 사용하는 웹 브라우저에 따라 다를 수 있습니다. 예를 들어, Google Chrome용 Google Chrome 브라우저에서 네트워크 탭을 확인하는 방법을 알아보려면 개발자용 Chrome 네트워크 활동 조사 문서를 참조하세요.

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

무료 체험