A/B 테스트 Shopify 테마에 대한 단계별 가이드(Convert Experiences 사용)

Shopify 비즈니스 소유자로서 올바른 테마를 찾는 것은 어렵습니다. ​​성공적인 전자 상거래 상점을 구축하는 데 많은 시간과 에너지가 소요됩니다. 그리고 모든 것은 온라인 상점에 올바른 모양을 제공할 완벽한 테마를 선택하는 데 몇 시간을 소비하는 것으로 시작됩니다.

선택할 수 있는 다양한 테마가 있지만 모두 어떻게 비교할 수 있습니까? 방문자를 즐겁게 하고 매출을 극대화하기 위해 비즈니스에 어떤 것을 사용해야 합니까?

하나 이상의 테마를 선택할 수 있는 방법이 있다면 어떨까요? 디자인 이 실제로 작동하고 단 하나에 전념하기 전에 판매를 얻고 있는지 확인하려면?

A/B 테스트는 선택한 Shopify 테마의 효과를 측정하는 좋은 방법입니다. 이를 수행하는 한 가지 방법은 디자인이 다른 두 가지(또는 그 이상) 테마(예: 테마 A와 테마 B)를 선택한 다음 서로에 대해 효과를 테스트하는 것입니다!

이 튜토리얼은 A/B 테스트 Shopify 테마에 대해 알아야 할 모든 것을 안내합니다. 설명을 위해 변환의 URL 분할 옵션을 사용하여 이 프로세스를 자세히 설명하겠습니다.

1. 테스트할 Shopify 테마 선택

우선 테스트할 두 개의 Shopify 테마를 선택해야 합니다. (첫 번째 테스트에서는 두 가지 테마로 제한해야 합니다. 두 개 이상의 테마를 고려 중인 경우 후속 테스트를 실행해야 합니다.)

기본 테마는 Shopify 스토어 방문자에게 실시간으로 표시되는 테마이고 테스트하려는 다른 테마는 미리 보기 모드(게시되지 않음)에 있습니다.

Shopify 앱에서 판매 채널 > 온라인 스토어 에서 라이브 테마를 찾은 다음 테마 로 이동합니다.

그런 다음 테마 라이브러리 에서 테스트할 두 번째 테마를 선택합니다.

2. 두 테마 모두에 변환 추적 코드 설치

이제 Shopify 플랫폼에서 테마를 선택했으므로 추적 코드를 설치해야 합니다. 이것은 방문자 행동을 적절하게 추적하고 테스트를 통해 정당한 승자를 가릴 수 있도록 하는 필수적인 부분입니다!

아래 지침에 따라 분할 테스트하려는 두 Shopify 테마에 Convert Experiences 추적 코드를 설치하기만 하면 됩니다.

판매 채널 > 온라인 스토어 > 테마 > 추가 작업 > 코드 편집으로 이동합니다.

그런 다음 theme.liquid 파일을 선택하고 스크린샷과 같이 첫 번째 "{% if %}" 섹션 바로 앞에 아래에 변환 추적 코드를 붙여넣습니다. 프로젝트 ID 번호를 자신의 변환 계정-프로젝트 ID로 바꿔야 합니다.

 <!-- 경험 변환 코드 시작-->
<스크립트 유형="텍스트/자바스크립트">
var _conv_page_type = "{% if template == 'index' %}homepage{% else template == "collections" %}collection{% else 템플릿 == "article" %}article{% else 템플릿 == "product" % }product{% else 템플릿 == "cart" %}cart{% else %}other{% endif %}";
 var _conv_category_;
 var _conv_category_name = "{{ 컬렉션.제목 }}";
 var _conv_product_sku = "";
 var _conv_product_name = "{{ 제품 제목 }}";
 var _conv_product_price = "{{ product.compare_at_price_min | 돈 }}";
 var _conv_customer_;
 var _conv_custom_v1 = "{{ 태그 }}";
 var _conv_custom_v2 = "{{ order.shipping_address.province }}";
 var _conv_custom_v3 = "{{ 장바구니.item_count }}";
 var _conv_custom_v4 = "{{ cart.total_price | money_without_currency }}";
</스크립트>
<script type="text/javascript" src="//cdn-3.convertexperiments.com/js/<이것을 프로젝트 ID 번호로 교체>.js"></script>
<!-- 경험 변환 코드 종료 --> 

마지막으로 변경 사항을 저장하는 것을 잊지 마십시오!

위에서 언급했듯이 테스트하려는 두 번째 테마에도 동일한 단계를 적용해야 합니다. 그것이 미리보기 모드에서 유지되는 테마임을 기억하십시오.

판매 채널 > 온라인 스토어 > 테마 > 테마 라이브러리 > (원하는 테마 선택) > 코드 편집으로 이동하여 시작하십시오.

그런 다음 두 번째 테마에 대한 프로세스를 반복합니다. theme.liquid 파일을 선택하고 위의 스크립트를 사용하여 코드를 편집하고 변경 사항을 저장합니다.

선택한 테마에 따라 다음과 같이 표시됩니다.

3. 수익 추적 허용

이제 중요한 부분은 수익 추적입니다. 어떤 Shopify 테마가 귀하의 비즈니스에 더 잘 맞았는지 어떻게 알 수 있습니까?

수익을 추적하는 세 가지 주요 방법이 있으며 이 게시물에서 자세히 설명합니다.

간단히 말해서 다음 중 하나를 결정할 수 있습니다.

1. Google Analytics를 통해 수익/구매를 추적할 수 있도록 주문 상태 Shopify 페이지에 변환 추적 코드를 설치합니다.
2. 수동 수익 추적 코드를 설정하거나
3. 웹훅을 사용합니다.

수익 추적을 사용하여 고객이 계산대를 방문하는 시기와 구매 빈도를 알 수 있습니다. 또한 평균 주문 금액 및 제품당 총 판매액과 같은 매장의 구매 추세에 대해 자세히 알아볼 수 있는 좋은 방법입니다.

설정하려면 설정 > 결제 로 이동하고 추가 스크립트 섹션까지 아래로 스크롤합니다. 추가 스크립트 양식 필드에 다음 코드를 붙여넣습니다.

 <스크립트 유형="텍스트/자바스크립트">
  if (typeof _conv_host == "정의되지 않음") {
  창["_conv_prevent_bodyhide"] = true;
  (기능() {
    var _conv_track = document.createElement("스크립트");
    _conv_track.src = "//cdn-3.convertexperiments.com/js/XXXXX-XXXXX.js"
    document.getElementsByTagName("head")[0].appendChild(_conv_track
</스크립트>

"XXXXX-XXXXX"라는 텍스트를 프로젝트 설정에 있는 변환 계정-프로젝트 ID로 바꿉니다.

4. Shopify 미리보기 테마 ID 찾기

다음으로 Shopify 웹사이트 내에서 게시되지 않은 테마의 코드를 편집해야 합니다. 판매 채널 > 온라인 스토어 > 테마 > 추가 작업 > 코드 편집으로 이동하면 됩니다.

그런 다음 관리자 URL /admin/themes/xxxxxxxx에서 테마 ID를 복사할 수 있습니다.

분할 URL 테스트의 변형 URL로 ?preview_theme_id=xxxxxxxx를 추가하려면 이 ID가 필요합니다(자세한 내용은 다음 섹션 참조).

5. 분할 URL 변환 테스트 만들기

이제 A/B 테스트 도구(이 경우 변환 경험)로 이동하여 분할 URL 테스트를 설정합니다.

분할 URL 변형 편집 섹션에서 원본 URL 필드에 다음 코드를 삽입합니다.

 ^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?( #(.*))?

다음을 변형 URL 로 사용하십시오. 여기서 preview_theme_id 변수는 이전 단계에서 발견한 것입니다(그리고 '123456'을 자신의 Shopify 미리보기 테마 ID로 바꾸는 것을 잊지 마십시오).

 $1$3$5?preview_theme_id=123456&$7

결과 URL은 다음과 같습니다.

 https://www.store.com?preview_theme_id=123456&.

그런 다음 정규 표현식 지원 을 활성화하고 원본 URL 변수를 변형 URL로 전송합니다 . 테스트 변형은 다음과 같아야 합니다(테마 ID는 다를 수 있음).

6. 타겟팅할 Shopify 페이지 지정

다시 한 번 경험 변환 앱으로 이동합니다. 사이트 영역 섹션에 Shopify 스토어의 모든 페이지(모든 귀중한 제품 페이지 포함!)가 포함되어 있는지 확인하십시오.

다음과 같이 보일 수 있습니다.

7. Shopify 미리보기 표시줄 숨기기

여기서 멈추고 미리보기 테마 템플릿이 웹사이트 방문자에게 무작위로 표시될 때 분할 URL 실험을 활성화하면 미리보기 템플릿임을 지정하는 성가신 팝업이 나타납니다. 이것은 방문자에게 매력적이지 않을 수 있으며 상점에서 실행 중인 다른 테스트에 대한 우려를 제기할 수 있습니다.

불필요한 마찰을 방지하려면 아래 CSS 코드를 Shopify에 추가하여 미리보기 배너를 숨깁니다. 이 배너를 체크아웃 페이지에서도 숨기려면 Shopify Plus 고객에게만 코드가 적용되므로 Shopify Plus 계정이 필요합니다.

Shopify에서 온라인 스토어 > 기본 설정 > Google Analytics 로 이동하고 추가 Google Analytics JavaScript 상자에 다음 코드를 추가합니다.

 기능() {
var css_override = document.createElement("스타일");
document.getElementsByTagName("head")[0].appendChild(css_override);
})();

var css = 'iframe#preview-bar-iframe { 표시: 없음 !중요; }',
머리 = 문서 머리 || document.getElementsByTagName('머리')[0],
스타일 = document.createElement('스타일');
style.type = '텍스트/css';
if (스타일.스타일시트) {
style.styleSheet.cssText = CSS;
} 또 다른 {
style.appendChild(document.createTextNode(css));
}
head.appendChild(스타일);

8. 분할 URL 실험 시작

이제 분할 URL 실험을 활성화할 준비가 되었습니다. 이렇게 하려면 경험 변환의 실험 페이지로 이동하여 활성으로 설정해야 합니다.

실험이 실행되면 방문자가 Shopify 스토어 페이지 중 하나를 방문하면 다음과 같이 됩니다.

8. 결과를 분석하고 승자를 선택하십시오!

Convert는 자주주의적 추론을 사용하여 Shopify 테마가 서로보다 나은 시기와 정도를 결정합니다. 일반적으로 우승한 테마를 선택하기 전에 2주를 기다리는 것이 좋습니다. 도구 자체는 일반적으로 이보다 먼저 승자를 알려주지 않습니다(사이트에 트래픽이 많은 경우 제외).

이것이 우리의 무료 평가판이 2주 동안 실행되는 주된 이유이기도 합니다.

전자 상거래의 세계에서 2주는 그리 길지 않습니다. 따라서 최소 2주를 고수하는 것은 나쁜 생각이 아닙니다. 결국, 우리는 전체 테마를 테스트하므로 테스트가 미치는 영향에 대해 완전히 확신하는 것이 나쁠 일이 없습니다.

결론

그래서 당신은 그것을 가지고 있습니다.

귀하가 비즈니스에 완벽한 테마를 찾고 있는 새로운 Shopify 스토어 소유자이든 더 나은 성능의 테마를 찾고 있는 숙련된 전자상거래 비즈니스 소유자이든 상관없이 Shopify A/B 테스트는 사용자 경험을 개선하고 최적화하는 데 도움이 될 수 있습니다. 전환율과 매출을 파악하고 더 나은 비즈니스 결정을 내릴 수 있습니다.

위의 모든 단계를 설명했으므로 테스트 프로세스가 생소한 영역이더라도 걱정하지 마십시오! 그리고 Convert Experiences가 얼마나 사용하기 쉬운지 마음에 들면 아래 배너를 클릭하여 무료 평가판을 사용하여 올바른 Shopify 테마를 찾는 작업을 바로 시작할 수 있습니다.