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

픽셀을 생성한 후 이를 테스트하여 온라인 스토어에서 고객 이벤트가 올바르게 트리거되도록 합니다. 사용자 지정 픽셀 테스트 및 문제 해결을 위해 다음 팁을 검토하세요.

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

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

브라우저 콘솔 로그를 사용하여 사용자 지정 픽셀 테스트하기

브라우저 콘솔 로그를 사용하여 사용자 지정 픽셀이 로드 중인지 여부 및 고객 이벤트에 가입되어 있는지 여부를 테스트할 수 있습니다. 콘솔을 확인하는 단계는 사용하는 웹 브라우저에 따라 다를 수 있습니다. 예를 들어, Google Chrome용 콘솔을 사용하는 방법을 알아보려면 개발자용 Chrome 콘솔 개요를 참조하세요.

브라우저 캐시를 지우는 데 다소 시간이 걸릴 수 있으므로 콘솔을 여러 번 확인하거나 픽셀이 로드되기 전에 다른 브라우저 창이나 장치를 사용해야 할 수 있습니다.

사용자 지정 픽셀이 로드 중인지 여부 테스트

GDPR 설정이나 타사 스크립트와 같은 특정 요소를 사용하여 픽셀이 로드되지 않도록 차단할 수 있습니다. 픽셀에 코드 조각을 추가하여 올바르게 로드 중인지 여부를 테스트할 수 있습니다. 이 코드 조각은 브라우저 콘솔에서 읽을 수 있는 메시지를 추가합니다. 메시지가 브라우저 콘솔에 표시될 경우 픽셀이 웹사이트에 성공적으로 로드 중이라는 의미입니다.

단계:

  1. Shopify 관리자에서 설정 > 고객 이벤트로 이동합니다.
  2. 테스트 중인 픽셀을 클릭한 다음 코드 섹션에 다른 코드 앞의 첫 줄에 다음 문장을 입력합니다: console.log("loaded");
  3. 저장을 클릭합니다.
  4. 온라인 스토어를 방문한 다음 브라우저 콘솔을 사용하여 console.log 문이 표시되는지 확인합니다.

픽셀이 로드되지 않을 때 픽셀 문제 해결하기

console.log("loaded"); 코드로 픽셀을 테스트한 후 로드되지 않을 경우 픽셀이 로드되지 않도록 하는 고객 개인정보 보호 설정이 있을 수 있습니다.

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

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

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

픽셀이 고객 이벤트에 가입되어 있는지 테스트

사용자 지정 픽셀이 고객 이벤트에 가입되어 있는지 테스트하기 위해 사용자 지정 픽셀에 다음 코드를 추가하여 page_viewed를 테스트하려는 이벤트로 교체할 수 있습니다.

analytics.subscribe("page_viewed", async (event) => { console.log(event); });

단계:

  1. Shopify 관리자에서 설정 > 고객 이벤트로 이동합니다.
  2. 테스트 중인 픽셀을 클릭한 다음 코드 섹션에 고객 이벤트 테스트 코드를 입력합니다.
  3. 저장을 클릭합니다.
  4. 온라인 스토어를 방문한 다음 브라우저 콘솔을 검토하여 console.log 문이 표시되는지 확인합니다.

추가 문제 해결

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

  • 브라우저의 쿠키를 지웁니다.
  • 표준 이벤트를 테스트 중인 경우 Shopify의 표준 이벤트 설명 개발자 설명서를 검토하여 이벤트를 트리거하기 위한 필수 단계를 수행 중인지 확인하세요.
  • 사용자 지정 이벤트를 테스트 중인 경우 theme.liquid 파일 또는 결제 확장에서 게시 코드 앞뒤로 console.log 문을 배치하여 publish() 코드가 실행 중인지 확인합니다. 예:
    console.log("before publish"); Shopify.analytics.publish("my_custom_event", myCustomData); console.log("after publish");

타사 픽셀 SDK 테스트하기

픽셀 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와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험