Google 최적화 도구로 WooCommerce 분할 테스트

이 트래픽의 일부가 고객이 되기 때문에 WooCommerce 스토어로 트래픽을 유도하는 것이 중요합니다. 그러나 귀하의 사이트가 방문자를 고객으로 전환하는 데 효율적인지 어떻게 알 수 있습니까?

고객이 되는 방문자의 수를 전환율이라고 합니다. 전환율은 성장하는 WooCommerce 스토어가 추적하고 최적화하기 위해 중요합니다. 매장 전환율을 최적화하는 매우 효과적인 방법 중 하나는 Google 최적화 도구를 사용하여 실험을 설정하여 전환율을 향상시키는 요소를 확인하는 것입니다.

이 문서는 WooCommerce 상점에서 Google 최적화 도구 분할 테스트를 설정하는 데 도움이 됩니다. 이 튜토리얼을 완료한 후에는 디자인 부분과 문구를 테스트하여 전환율을 높이는 방법을 이해하게 될 것입니다. 따라서 개발자나 코더가 될 필요가 없습니다. 나는 일을 간단하게 유지하겠다고 약속합니다.

이 기사를 세 부분으로 나누었습니다.

1. Google 최적화 계정을 설정하는 방법
2. WooCommerce 상점과 Google 최적화 도구 통합
3. Google 최적화 도구에서 첫 번째 분할 테스트 구성

적당한 양의 트래픽(한 달에 최소 5,000명의 고유 방문자)이 있는 WooCommerce 상점 소유자는 분할 테스트를 설정하는 것이 좋습니다. 사이트 구조 또는 문구의 어느 부분이 전환율을 제한하는지 알아낼 수 있는 환상적인 도구입니다. Google 최적화 도구를 사용하여 이러한 테스트를 무료로 설정할 수 있으며 처음부터 완벽합니다. 일반적인 분할 테스트의 예로는 "장바구니에 추가" 버튼의 색상을 테스트하여 체크아웃 페이지에서 신뢰 레이블을 숨기거나 표시하도록 장려하는 것, "체크아웃" 버튼의 문구 및 상점 웹사이트의 기타 중요한 요소가 있습니다.

이 예에서는 "결제" 버튼에 대한 실험을 실행하고 서로 다른 두 가지 색상을 비교할 것입니다. 시작하자!

Google 최적화 계정 설정

특히 이미 Google을 사용 중인 경우 Google 최적화 도구 계정을 만드는 것은 간단합니다. https://marketingplatform.google.com/about/optimize/로 이동하여 오른쪽 상단 모서리에 있는 "최적화 도구에 로그인" 버튼을 클릭합니다. 아직 Google 계정이 없으면 계정을 만들어야 합니다.

계정을 만든 후 설정 프로세스를 안내하는 마법사가 나타납니다. 함께 살펴보겠습니다.

마법사의 첫 번째 단계는 Google에서 다양한 이메일 뉴스레터를 구독하도록 요청하는 것입니다. 받은 편지함에 더 많은 이메일을 받고 싶은지는 귀하에게 달려 있습니다. 물론 저는 그렇게 하지 않습니다. 따라서 이 모든 상자에 대해 "아니요"를 선택하겠습니다.

2단계는 첫 번째 Google 최적화 도구 계정을 구성하는 것입니다. 비즈니스의 물리적 위치에 따라 크게 달라지는 데이터 개인정보 보호 및 GDPR과 관련된 모든 종류의 질문을 받게 됩니다. 미국에서는 유럽 연합보다 덜 엄격한 규칙이 적용됩니다. 다음은 전자 상거래 소매업체가 GDPR에 대해 알아야 할 사항에 대한 훌륭한 기사입니다.

독일에 살고 있기 때문에 GDPR에 대한 상자를 수락해야 합니다. 또한 내 계정에 수동으로 연결하지 않은 다른 Google 서비스와 내 데이터를 공유하고 싶지 않습니다. 데이터를 최대한 활용하려면 Google 웹로그 분석 계정을 Google 최적화 도구에 연결해야 합니다. 그러나 그런 사용 사례 외에는 내 데이터를 비공개로 유지하고 싶습니다.

그게 다야! 이제 계정이 설정되었으며 첫 번째 분할 테스트 실험을 만들 준비가 되었습니다.

WordPress 설치와 Google 최적화 도구 통합

위에서 설명한 대로 계정 설정을 완료하면 Google에서 "첫 경험"을 만들도록 요청합니다. 경험은 Google이 단일 웹사이트에서 실행되는 실험을 그룹화하는 방식입니다. 따라서 여러 사이트 또는 상점이 있고 이를 Google 최적화 도구에 통합하려면 각각에 대해 하나의 환경을 만들어야 합니다.

오른쪽 섹션에서 볼 수 있듯이 해당 경험을 만드는 작업이 25% 완료되었습니다. 자습서의 이 부분에서는 컨테이너 이름을 사용자 지정하고 분할 테스트를 위한 기반을 설정하고 이를 Google Analytics에 연결합니다.

컨테이너를 구성하기 위해 대상 웹사이트의 URL을 이름으로 사용하고 싶습니다. 오른쪽 사이드바에서 "컨테이너 정보" 바로 옆에 있는 세 개의 수직 점을 클릭하여 컨테이너 이름을 쉽게 변경할 수 있습니다.

"컨테이너 이름 편집"을 클릭하고 이 컨테이너가 통합된 웹사이트를 인식하는 데 도움이 되는 이름을 입력합니다. 이 튜토리얼의 목적을 위해 "Woo Google Optimize Demo"를 사용하겠습니다.

Google 최적화 도구에서 첫 번째 분할 테스트 환경 구성

이제 컨테이너의 이름을 적절하게 지정했으므로 WooCommerce 상점에 대한 첫 번째 분할 테스트를 설정하는 과정을 살펴보겠습니다. 먼저 파란색 "Let's Go" 버튼을 클릭하면 화면 오른쪽에 새 영역이 열립니다.

해당 영역에서 경험의 이름을 지정할 수 있습니다. 이 예에서는 "결제 버튼 색상 테스트"라고 불렀습니다. 실험을 실행할 페이지의 URL을 지정해야 합니다. 이 URL은 Checkout 페이지 URL이 됩니다.

실행하려는 경험 유형을 추가로 지정할 수 있습니다. Google 최적화 도구는 네 가지 유형을 제공합니다.

• A/B 테스트. 이렇게 하면 트래픽의 한 부분을 원본으로 보내고 다른 부분을 대안 페이지로 보내 원본 페이지의 변형 하나를 만들고 서로 비교할 수 있습니다.
• 다변수 테스트. 이렇게 하면 원본 페이지의 여러 변형을 만들 수 있습니다. 트래픽 양이 많을 때만 사용합니다. 그렇지 않으면 신뢰할 수 있는 결과를 제공하는 데 오랜 시간이 걸립니다.
• 리디렉션 테스트 . 트래픽의 일부를 원래 페이지와 다른 페이지로 리디렉션할 수 있습니다. 이것은 완전히 다른 두 페이지 레이아웃을 비교하거나 트래픽의 일부를 하위 도메인으로 유도하려는 경우에 유용합니다.
• 개인화. 이러한 유형의 경험을 사용하여 특정 규칙에 따라 웹사이트 콘텐츠를 개인화할 수 있습니다. 예를 들어 국가를 타겟팅하고 해당 국가에 특정한 정보를 제공할 수 있습니다(예: Checkout에서 EU 기반 고객에 대한 GDPR 확인란).

이 튜토리얼에서는 간단한 A/B 테스트를 설정하여 두 개의 다른 체크아웃 버튼 색상을 서로 비교합니다.

다음 화면에서 "변형 추가"를 클릭하고 테스트 중인 항목을 인식하는 데 도움이 되는 변형 이름을 지정합니다. 제 경우에는 체크아웃 페이지의 "주문하기" 버튼을 빨간색 배경색으로 전환하겠습니다. 따라서 이 튜토리얼에서는 "빨간색 주문 버튼"이 의미가 있습니다.

"완료"를 클릭하면 개요 화면으로 돌아갑니다. 테스트 구성을 진행하기 전에 체크아웃 페이지에 액세스할 수 있고 변경할 수 있도록 실제로 장바구니에 제품이 있는지 확인해야 합니다.

Google 최적화 도구는 변형을 구성하기 위해 '수정'을 클릭하는 즉시 결제 페이지를 열려고 시도합니다. 따라서 WooCommerce 상점에 탭이 열려 있고 체크아웃 페이지에 있는지 확인해야 합니다.

또한 Chrome용 Google 최적화 도구 확장 프로그램이 설치되어 있는지 확인하십시오. 다음은 Chrome 웹 스토어 링크입니다(확장 프로그램은 무료입니다).

자, 계속해서 "편집"을 클릭하여 A/B 테스트를 구성해 보겠습니다. Google 최적화 도구가 다시 로드되고 이제 결제 페이지가 열리는 것을 볼 수 있습니다. 그렇기 때문에 실제로 해당 페이지를 볼 수 있고 빈 장바구니 페이지로 리디렉션되지 않도록 장바구니에 제품이 있어야 합니다.

화면 위로 마우스를 움직이기 시작하면 Checkout 페이지의 각 HTML 구성 요소가 강조 표시되는 것을 볼 수 있습니다. "주문하기" 버튼으로 이동하여 클릭합니다. 그러면 위의 스크린샷에서 볼 수 있는 속성 창이 열립니다.

배경색과 텍스트 색상을 변경하는 것은 매우 간단합니다. 해당 속성 창에서 텍스트 색상 및 배경 색상 필드가 표시될 때까지 아래로 스크롤하고 테스트하려는 색상으로 값을 업데이트합니다. 이 예에서 "주문하기" 버튼에는 회색 텍스트가 있는 검은색 배경이 있습니다. A/B 테스트에서 빨간색 배경에 흰색 텍스트로 변경했습니다.

이를 통해 A/B 테스트 변형을 완전히 구성했으며 변형 편집기의 오른쪽 상단 모서리에 있는 "저장"을 누를 수 있습니다.

참고: 변형당 하나 이상의 요소를 테스트하지 마십시오. 변형당 둘 이상의 변경 사항을 테스트할 때 실제로 웹사이트에서 방문자 행동의 변화를 일으킨 시각적 변화를 알 수 없습니다.

개요 화면으로 돌아가면 이제 Google 최적화 도구 변형에 두 가지 변경 사항을 테스트 중이라고 표시되지만 혼동하지 않도록 하십시오. 한 번에 둘 이상의 요소를 테스트하는 것은 절대 권장되지 않으며 이것이 바로 여기에서 수행하는 작업입니다. 한 가지 변경 사항은 글꼴 색상이고 다른 변경 사항은 버튼의 배경 색상입니다. 아직 테스트 중인 요소 중 하나일 뿐입니다.

다음 단계는 Google 최적화 도구 계정을 애널리틱스와 연결하는 것입니다. 따라서 진행률 표시줄에서 "분석에 연결" 버튼을 클릭하거나 "측정 및 목표" 섹션까지 아래로 스크롤해야 합니다.

여기에서 "분석에 연결" 버튼을 클릭하고 올바른 속성과 보기를 선택할 수 있습니다. 참고: 계속하기 전에 WooCommerce 상점에서 Google Analytics가 올바르게 설정되어 있는지 확인하십시오.

그런 다음 웹사이트에 삽입해야 하는 코드 조각이 표시됩니다. 이를 정확히 구현하는 방법은 Google Analytics 구성(범용 추적 및 전체 사이트 태그)에 따라 다릅니다. 이 예에서는 전체 사이트 태그 통합을 사용하고 있으므로 내 사이트에 한 줄의 코드를 추가하기만 하면 됩니다. Google 최적화 도구는 여기에서 설명을 잘 하므로 지침을 주의 깊게 읽으십시오.

마지막 단계는 "주문하기" 버튼에 대한 추적 이벤트를 설정하는 것입니다. Google 최적화 도구가 추적된 데이터를 분할 테스트의 맞춤 목표로 사용할 수 있도록 버튼 클릭을 추적하도록 Google 애널리틱스에 지시해야 합니다. 해당 클릭 추적이 없으면 Google 최적화 도구는 테스트에서 승리한 유사 콘텐츠를 결정할 수 없습니다. 왜냐하면 그렇게 할 수 있는 올바른 데이터가 없기 때문입니다.

WooCommerce 사이트에 클릭 추적을 추가하는 방법에는 여러 가지가 있습니다. 내가 가장 좋아하는 방법은 Google 태그 관리자를 사용하는 것입니다. 여기에서 전체 추적 프로세스를 설정하는 방법에 대해 자세히 설명하지 않겠습니다. 그 자체가 게시물이 될 것이기 때문입니다. 그러나 이전에 클릭 추적을 설정하지 않은 경우 Medium에서 이 기사를 읽는 것이 좋습니다.

올바른 태그로 Google 태그 관리자를 설정하고 WooCommerce 사이트에 배포했으면(예: 이 무료 플러그인 사용) Google 최적화 도구에서 맞춤 목표를 설정할 준비가 된 것입니다.

'실험 목표 추가'를 클릭하고 '맞춤형 만들기'를 선택합니다. 그러면 고유한 추적 규칙을 정의하는 화면이 표시됩니다.

'이벤트 라벨' 값은 Google 태그 관리자에서 구성한 라벨과 일치해야 합니다. Google 최적화 도구가 이 맞춤 이벤트("주문하기" 버튼 클릭)를 추적할 수 있으려면 이벤트 레이블이 Google 최적화 도구와 Google 태그 관리자에서 일치해야 합니다. "Event Action", "Event Category" 또는 "Event Value"를 규칙 매개변수로 사용할 수도 있지만 이 자습서에서는 레이블을 사용합니다.

맞춤 목표를 저장한 후 진단 도구를 실행하여 Google 최적화 도구 실험이 올바르게 설정되었는지 확인할 수 있습니다. 최적화 도구를 사용하려면 페이지에 Google 애널리틱스를 로드해야 합니다. 따라서 추적에서 사용자를 제외하면(예: WP의 모든 관리자에 대한 추적 차단) 이 유효성 검사가 실패할 가능성이 높습니다. 이 경우 일시적으로 Google Analytics 추적에 사용자를 포함시키는 것이 좋습니다. 또는 시크릿 창에서 WooCommerce 상점을 열고 Google 태그 관리자, Google 애널리틱스 및 Google 최적화 도구의 모든 코드가 상점 코드에 로드되고 있는지 확인할 수 있습니다.

이 시점에서 경험이 제대로 실행되고 있어야 합니다. Google 최적화 도구의 라이브 디버그 모드를 사용하고 사이트를 탐색하여 경험을 확인할 수 있습니다. Chrome은 웹사이트 아래에 Google 최적화 도구가 WooCommerce 사이트에서 어떻게 작동하는지에 대한 통찰력을 제공하는 영역을 표시하는 것을 볼 수 있습니다.

이 스크린샷에서 경험이 적용된 것과 내가 보고 있는 변형 및 변형을 트리거한 URL과 같은 몇 가지 추가 정보를 볼 수 있습니다.

마지막으로 테스트 데이터를 수집하고 더 많은 전환 및 수익을 위해 WooCommerce 사이트를 최적화할 준비가 되었습니다. 이 프로세스는 혼란스러울 수 있으므로 어느 시점에서든 막히면 Twitter에 연락하세요. @iamjankoch에서 도와드리겠습니다. 즐거운 테스트!