사용자 지정 픽셀 테스트

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

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

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

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

다음은 모든 표준 이벤트를 샌드박스로 전송하고 이벤트 데이터를 콘솔에 기록하는 사용자 지정 픽셀 스크립트입니다. 표준 이벤트는 Shopify 픽셀 헬퍼에 표시됩니다. 또한 all_events, all_custom_events, all_dom_events와 같은 다른 대량 구독에 가입하여 웹 픽셀이 제공할 수 있는 모든 것을 확인할 수 있습니다. 자세한 내용은 웹 픽셀 API를 참조하십시오.

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

이 페이지의 내용

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

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

단계:

Shopify 관리자에서 설정 > 고객 이벤트로 이동하십시오.
테스트하려는 픽셀 옆의 상태 열에 픽셀의 상태가 연결됨으로 표시되는지 확인하십시오.
픽셀이 연결되어 있지 않으면 ...를 클릭한 다음 연결을 클릭하십시오.

Shopify 픽셀 헬퍼를 사용하여 사용자 지정 픽셀 테스트

사용자 지정 픽셀이 연결되었는지 확인한 후에는 Shopify 픽셀 헬퍼를 사용하여 사용자 지정 픽셀이 데이터를 전송하고 스토어 데이터를 수신하는지 테스트할 수 있습니다. 한 번에 하나의 사용자 지정 픽셀을 테스트할 수 있습니다.

단계:

Shopify 관리자에서 설정 > 고객 이벤트로 이동하십시오.
테스트할 사용자 지정 픽셀을 클릭하십시오.
테스트를 클릭하여 웹사이트에서 사용자 지정 픽셀을 열고 테스트하십시오.
선택 사항: 스토어의 동의 설정 및 사용자 지정 픽셀의 고객 개인정보 보호 설정에 따라 픽셀 헬퍼 대화 상자에 픽셀이 동의를 기다리는 중입니다가 표시될 수 있습니다. 테스트를 계속하려면 다음 중 하나를 수행하십시오.
- 스토어의 쿠키 배너 또는 기본 설정에서 추적을 허용하십시오.
- 동의하고 테스트 계속을 클릭하십시오.
- 픽셀이 여전히 로드되지 않으면 고객 개인정보 보호 설정을 검토하십시오.
어떤 이벤트가 로드되는지 보려면 픽셀을 테스트하려는 각 페이지를 방문하고 픽셀 헬퍼 대화 상자의 수신된 이벤트 섹션에서 이벤트가 성공적으로 구독되었고 콜백 기능이 성공했는지 확인하십시오.
- 새 페이지로 이동하여 page_viewed 이벤트를 테스트하세요.
- 제품을 클릭하여 product_viewed 이벤트를 테스트하십시오.
- 카트에 제품을 추가하여 product_added_to_cart 이벤트를 테스트하십시오.
- 체크아웃으로 이동하여 checkout_started 이벤트를 테스트하십시오.
- 체크아웃에서 배송 정보를 입력하여 checkout_shipping_info_submitted 이벤트가 checkout_started 이벤트를 대체하는지 테스트하십시오.
- 체크아웃을 완료하여 checkout_completed 이벤트가 checkout_shipping_info_submitted 이벤트를 대체하는지 테스트하십시오. 테스트 주문에 대해 자세히 알아보십시오.
수신된 이벤트 데이터를 보려면 을(를) 클릭하여 픽셀 헬퍼 대화 상자를 확대하십시오.

수신된 이벤트 섹션 보기

5단계에서 어떤 이벤트가 로드되는지 테스트하면 픽셀 헬퍼 대화 상자의 수신된 이벤트 섹션에 다음 상태 중 하나가 표시됩니다.

녹색 점은 이벤트가 성공적으로 구독되었고 콜백 기능이 성공했음을 나타냅니다.
빨간색 점은 이벤트가 성공적으로 구독되었지만 콜백 기능이 실패했음을 나타냅니다. 사용자 지정 픽셀의 문제를 해결하는 방법을 알아보십시오.
픽셀 헬퍼에는 최상위 수준 또는 콜백 기능에서 발생하는 포착되지 않은 오류가 표시됩니다. 최상위 수준 오류는 픽셀 헬퍼가 로드될 때 표시됩니다. 콜백 오류 메시지는 빨간색 점이 있는 이벤트를 클릭하여 확대할 때 표시됩니다.
다음 코드 샘플에는 콜백 오류와 최상위 수준 오류가 포함되어 있습니다. 최상위 수준 오류의 위치에 따라 픽셀이 부분적으로 작동할 수 있습니다.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

JavaScript 오류 해결에 대해 자세히 알아보려면 JavaScript 문제 해결을 참조하십시오.

사용자 지정 픽셀 문제 해결

테스트 중에 픽셀이 로드되거나 실행되지 않고 이벤트 데이터와 픽셀 코드에서 오류를 이미 검토했다면 다음 문제 해결 방법을 시도해 보십시오.

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

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

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

해당 지역에서 동의가 필요한 고객 개인정보 보호 설정이 있는 경우 쿠키 배너를 통해 동의를 제공했는지 확인하십시오.
픽셀 로드를 차단하는 고객 개인정보 보호 설정이 없는 경우 브라우저 쿠키를 지워 쿠키 배너를 재설정하고 동의를 제공하십시오.

타사 도구를 사용하여 동의를 관리하는 경우 타사 제공업체에 문의하여 지원을 받으십시오.

추가 문제 해결

사용자 지정 픽셀이 고객 이벤트에 제대로 등록되었는지 여전히 불분명한 경우 다음 문제 해결 방법을 시도해 보십시오.

브라우저 쿠키를 삭제하십시오.
표준 이벤트를 테스트하는 경우 Shopify의 표준 이벤트 설명 개발자 설명서를 검토하여 이벤트를 트리거하는 데 필요한 단계를 수행하고 있는지 확인하십시오.

타사 픽셀 도우미 테스트

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

타사 픽셀 SDK 로드 여부 테스트

네트워크 탭을 확인하는 단계는 사용하는 웹 브라우저에 따라 다릅니다. 예를 들어, Google Chrome에서 네트워크 탭을 확인하는 방법을 알아보려면 Chrome for Developers의 네트워크 활동 검사 설명서를 참조하십시오.

타사 픽셀 SDK가 로드되었는지 테스트하려면 먼저 SDK URL에 대한 타사 제공업체의 코드를 검색하여 픽셀 코드에 추가해야 합니다. 지원이 필요한 경우 타사 픽셀 제공업체에 문의하십시오.

단계:

Shopify 관리자에서 설정 > 고객 이벤트로 이동하십시오.
테스트할 사용자 지정 픽셀을 클릭하십시오.
**코드** 섹션에서 타사 제공업체가 제공한 픽셀 SDK를 픽셀 코드 끝에 입력하십시오.
**저장**을 클릭하십시오.
온라인 스토어를 방문한 다음 네트워크 탭을 확인하여 타사 제공업체의 SDK URL이 다운로드되고 있는지 확인하십시오.
선택 사항: 타사 픽셀 SDK가 로드되지 않는 경우 샌드박스에서 JavaScript 런타임 오류를 확인하십시오. 예를 들어 Chrome에서는 특정 iFrame을 선택하여 콘솔 로그를 검토한 다음 테스트 중인 특정 픽셀로 로그 범위를 좁힐 수 있습니다. Chrome에서 JavaScript 런타임 오류를 확인하는 방법에 대해 자세히 알아보려면 Chrome의 JavaScript 디버그 설명서를 참조하십시오.

테스트 중에 타사 픽셀 SDK가 로드되지 않는 경우 타사 픽셀 제공업체에 문의하여 지원을 받으십시오.

기타 타사 픽셀 SDK 테스트

타사 픽셀 SDK가 초기화되었는지 또는 이벤트를 수집하고 있는지 테스트하려면 타사 픽셀 제공업체의 설명서를 참조하십시오.

픽셀 SDK가 이벤트를 수집하는지 테스트하기 위해 브라우저의 네트워크 탭을 확인하라는 지침을 받을 수 있습니다. 네트워크 탭을 확인하는 단계는 사용하는 웹 브라우저에 따라 다릅니다. 예를 들어, Google Chrome 브라우저에서 네트워크 탭을 확인하는 방법을 알아보려면 Chrome for Developers의 네트워크 활동 검사 설명서를 참조하십시오.