워드프레스 홈페이지에 구글애널리틱스 전자상거래 추적코드 추가

최근 블로그코디 닷컴테마샵 기능을 추가하면서 전반적인 홈페이지 리뉴얼 작업을 진행 하였습니다. 지금까지는 주로 홍보 목적의 홈페이지를 운영해 왔기 때문에 그에 맞는 보안, 통계 분석, 검색엔진최적화, 성능 최적화 등의 작업을 진행해 왔다면, 전자상거래 기능(디지털 상품 판매를 위한)이 추가된 지금부터는 그에 맞는 보안, 통계 분석, 검색엔진최적화, 성능 최적화 등의 작업을 해야 할 필요가 있습니다.

 

블로그코디 테마샵

 

블로그코디 테마샵

 

 

(여러가지 작업 중에서) 먼저 전자상거래 통계 분석을 진행하려고 하는데, 전자상거래 분석을 위한 구글애널리틱스 추적 코드는 기존 기본코드 외 다음의 4가지가 필요하다고 합니다. (하단 내용의 대부분은 구글애널리틱스 전자상거래 분석 #2: 추적코드 적용 글을 참고 하였습니다)

 

  1. Ecommerce.js 플러그인 호출
  2. 결제정보 (예: 주문번호, 구매액 등) 코드
  3. 제품정보 (예: 제품 ID, 제품명, SKU 등) 코드
  4. GA로 위 정보를 전송하는 커맨드

 

위 4가지는 기본 GA코드 추가되어 구매완료(영수증) 페이지 삽입되어야 한다고 합니다.

 

참고 글에 설명된 단계별 내용을 통해 블로그코디의 한국형 워드프레스 테마가 탑재된 워드프레스 홈페이지에 어떻게 적용하면 좋을지 알아 보겠습니다.

 

 

1. Ecommerce.js 플러그인 호출

 

페이지마다 삽입되는 기본 GA코드에 아래 코드를 추가해서 ecommerce.js 자바스크립트 파일을 호출해 주세요. 구매완료 페이지에만 추가하시면 됩니다

 

 

그렇다면 블로그코디의 한국형 워드프레스 테마 + 우커머스 결합으로 제작된 워드프레스 쇼핑몰에서 구매완료 페이지 템플릿은 무엇이고, ecommrece.js 코드를 어떻게 추가해야 할까요?

 

블로그코디의 한국형 워드프레스 테마에서는 우커머스 템플릿을 다루기 위해 woocommerce 디렉토리를 생성하고, archive-product.php, content-product.php, content-single-product.php 의 3개 파일을 기본으로 오버라이딩하고 있습니다. 구매완료를 다루는 우커머스 템플릿은 checkout/thankyou.php 파일인데, 이 파일은 기본이 아니기 때문에 추가로 오버라이딩 해야 합니다. 그 이후 thankyou.php 파일에 ecommerce.js 코드를 포함한 GA코드를 추가해 줘야 합니다.

 

 

2. 결제정보 코드 추가

 

다음 형식으로 결제 정보를 전송해야 합니다. 구매완료 페이지에 추가하세요.

 

각 항목이 의미하는 것을 살펴보겠습니다.

 

  • ID: 각 주문별 고유번호. 필수항목 (보통 시스템에서 자동생성됩니다)
  • Affiliation: 제휴사이름
  • Revenue: 구매총액. 필수항목 (배송비 및 세금, 기타 모든 비용을 포함한 값이어야 합니다)
  • Shipping: 배송비
  • Tax: 세금
  • Currency: 통화

 

* 위 코드 역시 블로그코디의 한국형 워드프레스 테마 + 우커머스 결합으로 제작된 워드프레스 쇼핑몰에서 어떻게 생성하고 어디에 추가하는 게 좋을까요?

 

 

3. 제품정보 코드 추가

 

다음 형식으로 제품 정보를 전송해 주세요. 마찬가지로 구매완료 페이지에 추가하세요.

 

각 항목이 의미하는 것을 살펴보겠습니다.

 

  • ID: 주문번호. 필수항목 (보통 시스템에서 자동생성됩니다)
  • Name: 제품명, 필수항목
  • SKU: 제품별 고유번호
  • Category: 제품 분류 (카테고리별 분석을 위한 항목입니다. 품목당 하나씩만 전송하실 수 있습니다)
  • Price: 제품 단가
  • Quantity: 구매한 제품 수량
  • Currency: 통화

 

* 위 코드 역시 블로그코디의 한국형 워드프레스 테마 + 우커머스 결합으로 제작된 워드프레스 쇼핑몰에서 어떻게 생성하고 어디에 추가하는 게 좋을까요?

 

 

4. GA로 위 정보 전송

 

마지막으로 다음 코드를 추가해 주세요. 구매완료 페이지에 추가하세요.

 

 

 

 

이제 전자상거래 통계 분석을 위해 위 1~4번까지의 정보가 포함된 스크립트를 생성하고 블로그코디의 한국형 워드프레스 테마 + 우커머스 결합으로 제작된 워드프레스 쇼핑몰에 추가하는 방법을 알아 보겠습니다.

 

여러 가지 방법을 검토해 본 결과, 다음 코드를 functions.php 파일에 추가하는 것이 (현재 가장) 최선이라고 생각하고 있습니다.

 

코드 참고: Google Analytics eCommerce Tracking for WooCommerce

 

 

위 코드가 올바르게 적용 되었다면, 블로그코디의 한국형 워드프레스 테마 + 우커머스 결합으로 제작된 워드프레스 쇼핑몰의 구매완료 페이지에 다음 코드가 추가되는 것을 볼 수 있습니다.

 

 

ga-ecommerce

 

 

이제 구글애널리틱스에서 위 정보를 어떻게 반영하는지 살펴보는 일이 남았습니다. 이에 대해서는 다음 기회에 살펴 보도록 하겠습니다.

 

 

• (주)블로그코디 대표
• 워드프레스 교육 서비스 런칭
• 워드프레스 정보 공유 커뮤니티 make BCT 런칭
• 한국형 워드프레스 테마 출시
• 워드프레스 홈페이지 제작 서비스 런칭
No comments
Write CommentLIST
WRITE COMMENT

위로이동