🌗GTM을 통한 알파리뷰 조회 스크립트 분석 방식에 따른 장단점

1️⃣ 요소 공개 상태 트리거 방식
– 장점 : 고객 행동을 dataLayer.push 방식에 비해 비교적 빠르게 측정 가능하다. 또한 조회한 리뷰 텍스트도 수집이 가능하다.
– 단점 : 아이프레임에서 발생하는 이벤트므로 saladlab.shop 또는 alph.kr 가 발생 도메인이 된다. 따라서 전환 추적에 용이하지 않을 수 있다. 아이프레임 특성 상 리뷰를 조회하면 세션이 추가로 생기므로 별도의 GA4 속성을 설치해야 한다.
*변수명은 변경될 수 있으며, 변경될 경우 변수명을 변경해서 사용하세요.
*아이프레임용 별도의 GA4 및 GTM 설치해야 합니다.

2️⃣ 알파리뷰가 발생시키는 dataLayer.push 인식 방식
– 장점 : 사이트 GTM에 데이터가 직접적으로 반영되므로 도메인 이슈 없이 GTM 이벤트 수집이 정확하다. 기존 GA4 에 데이터를 삽입할 수 있다.
– 단점 : 사이트 속도에 영향을 주는 것을 최소화하기 위해 dataLayer 준비가 약 15초 이후에 발생해서 15초 이전에 클릭한 리뷰 들은 카운트 할 수 없다. 조회한 리뷰 텍스트는 수집할 수 없다.
*dataLayer.push 방식은 지속적으로 반영되지 않을 수 있습니다.
*dataLayer 준비 시간은 변경될 수 있습니다.

⚙️GTM을 통한 알파리뷰 조회 스크립트 분석 방식 세팅방법

최하단에 해당 코드들이 모두 반영된 GTM 컨테이너가 있습니다.
GTM 컨테이너를 삽입한 뒤 약간의 설정 변경으로도 이용 가능합니다.

1️⃣ 요소 공개 상태 트리거 방식 : 알파리뷰 공통 위젯에 GTM 삽입 후 ‘요소 공개 상태’ 트리거

사이트에서 아이프레임으로 알파리뷰를 로드할 때 GTM을 곁들여 로드 하는 방식.
아이프레임은 다른 사이트에서 발생하는 스크립트를 그대로 얹어서 우리 사이트에서 이용하는 방식으로,
아이프레임에서 GTM을 통해 GA를 불러올 경우 기존 도메인과는 다른 별도의 알파리뷰 측 도메인(saladlab.shop 또는 alph.kr)으로 인식하게 됨.
따라서 아이프레임을 통해 GTM 을 불러와서 리뷰 조회를 수집할 때는 기존 사용하던 GA에 세션 데이터와 페이지 뷰에 데이터 영향을 주지 않기 위해 🔴★아이프레임 방식으로 진행시 기존에 사용하던 GTM과는 별개로 알파리뷰 측정용 GTM과 GA4 속성을 별도로 만들어서 반영해야만 함★🔴
만약 동일한 GTM과 GA4를 사용 시 리뷰를 조회한 경우 세션, 페이지뷰 데이터가 중복되는 문제가 발생함.

알파리뷰 외의 예를 들자면, 카페24 PC 디자인 에서 팝업을 띄울 경우 팝업은 아이프레임 방식으로 노출되게 되는데, 이 때 사용자들이 1번 방문하는 경우 세션이나 페이지뷰 행동이 아이프레임 작동 방식에 의해 중복되어 발생하는 경우가 모든 업체에게 발견 됨.

—

●1. 카페24 어드민 > 앱 > 알파리뷰 관리하기 > 설정 > 3.디자인 설정 > 공통 디자인요소 > 상세보기 디자인 > JS. 이동

●2. JS 영역 내에 구글 태그 매니저 head 용 코드 JS 부분만 삽입. 아래 예시코드에서 컨테이너 ID (GTM-~~id값~~) 교체
▼▼▼
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’★★★여기다가 GTM 컨테이너 ID 삽입★★★‘);
▲▲▲

●3. GTM 트리거 에서 ‘요소 공개 상태’ 로 아래 설정으로 트리거 생성
– 트리거 명 : 알파리뷰-아이프레임용-리뷰조회
– 선택 방법 : ID
– 요소 ID : widget_detail
– 트리거 실행 시점 : 요소가 화면에 표시될 때마다
– 최소 비율 표시 : 30

●4. 조회한 상품명 데이터와 조회한 리뷰 텍스트를 수집하기 위해 GTM에서 아래 변수 반영
○4-1. ‘알파리뷰-아이프레임용-조회한 상품명’ 변수,
– 변수 유형 : 맞춤 자바 스크립트
– 맞춤 자바스크립트 내용
▼▼▼
function() {
var alphareview_product_name = $(“#widget_detail > div.widget_detail_info > div.widget_detail_info_product > div > div.widget_detail_info_product_name”).text().replace(/ |\n|\<.*?\>/g,””);;

return alphareview_product_name;
}
▲▲▲

○4-2. ‘알파리뷰-아이프레임용-텍스트 콘텐츠’ 변수,
– 변수 유형 : 맞춤 자바 스크립트
– 맞춤 자바스크립트 내용
▼▼▼
function() {
var alphareview_text_content = $(“#widget_detail > div.widget_detail_info > div.widget_detail_info_review > div.widget_detail_info_content”).text().replace(/ |\n|\<.*?\>/g,””);

return alphareview_text_content;
}
▲▲▲

●5. GTM 에서 ‘태그’ 생성
– 태그명 : 알파리뷰-아이프레임용-리뷰조회-GA4
– 측정 ID : 신규 생성한 GA4 웹 스트림 ID (G-123123~~)
– 이벤트 이름 : 포토 리뷰 조회
– 이벤트 매개변수 1, 매개변수 이름 : product_name
– 이벤트 매개변수 1, 매개변수 값 : {{알파리뷰-아이프레임용-조회한 상품명}}
– 이벤트 매개변수 2, 매개변수 이름 : review_text
– 이벤트 매개변수 2, 매개변수 값 : {{알파리뷰-아이프레임용-텍스트 콘텐츠}}
*GA4 매개변수 값은 100자 까지만 수집됨. 따라서 알파리뷰-텍스트 콘텐츠 데이터는 GA4에서 100자 이상의 텍스트는 생략되어 수집됨.

●6. GA4에서 맞춤측정기준 생성
GA4 설정 > 구성 > 맞춤 정의 > 맞춤측정기준에서 이벤트 매개변수 ‘product_name’, ‘review_text’ 를 생성.

2️⃣ 알파리뷰가 발생시키는 dataLayer.push 인식 방식

알파리뷰는 사이트 속도에 영향을 주지 않기 위해 데이터 분석용 데이터 영역을 사이트 로드 후 15초 뒤부터 발생시킴. (*dataLayer 준비 시간은 변경될 수 있습니다.)
따라서 사이트 로드 후 15초 전에 조회한 리뷰들은 확인 불가함.
🔴★dataLayer.push 방식은 아이프레임 방식과는 다르게 기존 웹스트림 GA4 에 데이터를 넣어야 함★🔴

[발생하는 데이터영역 맞춤 이벤트]
– ‘engage_review_exposure’ : 리뷰가 노출될 때마다 발생. 너무 많이 발생하므로 사용하지 않을 것을 권장.
– ‘engage_review_click’ : 리뷰를 클릭한 순간 발생.
  – ‘engage_detailPopup_exposure’ : 리뷰 팝업이 떠서 조회를 했을 때 발생. 팝업 뜬 후 리뷰 간 이동할 때는 미발생.

—

( 사이트에 GTM 이 정상 설치되어 있는 상황을 가정 )

●1. GTM 에서 ‘자바스크립트 변수’ 생성
– 변수명 : 알파리뷰-데이터영역용-상세페이지 상품명
– 전역 변수 이름 : product_name
*dataLayer.push 인식 방식에서는 조회한 리뷰 제품명 정보를 상세페이지에서만 수집가능합니다.
조회한 상품 ID 값은 모든 위치에서 수집 가능합니다.

●2. GTM 에서 ‘데이터영역 변수’ 생성
– 변수명 : 알파리뷰-데이터영역용-조회한 위젯타입
– 데이터 영역 변수 이름 : eventModel.widget_type

●3. GTM 에서 ‘데이터영역 변수’ 생성
– 변수명 : 알파리뷰-데이터영역용-조회한 상품 ID
– 데이터 영역 변수 이름 : eventModel.product_id

●4. GTM 에서 ‘맞춤 이벤트 트리거’ 생성
– 트리거명 : 알파리뷰-데이터영역용-리뷰조회
– 이벤트 이름 : engage_detailPopup_exposure

●5. GTM 에서 ‘태그’ 생성
– 태그명 : 알파리뷰-데이터영역용-리뷰조회-GA4
– 측정 ID : 기존 GA4 웹스트림 ID (G-123123~~)
– 이벤트 이름 : 포토 리뷰 조회
– 이벤트 매개변수 1, 매개변수 이름 : product_name
– 이벤트 매개변수 1, 매개변수 값 : {{알파리뷰-데이터영역용-상세페이지 상품명}}
– 이벤트 매개변수 2, 매개변수 이름 : product_id
– 이벤트 매개변수 2, 매개변수 값 : {{알파리뷰-데이터영역용-조회한 상품 ID}}
– 이벤트 매개변수 3, 매개변수 이름 : alphareview_widget_type
– 이벤트 매개변수 3, 매개변수 값 : {{알파리뷰-데이터영역용-조회한 위젯타입}}

●6. GA4에서 맞춤측정기준 생성
GA4 설정 > 구성 > 맞춤 정의 > 맞춤측정기준에서 이벤트 매개변수 ‘product_name’, ‘product_id’, ‘alphareview_widget_type’ 를 생성.

3️⃣GTM 컨테이너 다운로드 후 원하는 태그만 활성

●1. https://studiomx.co.kr/alph/posting/alph.zip 다운로드

●2. 압축을 푼 뒤 json 형식의 컨테이너를 원하는 방식에 따라 삽입
– 아이프레임용 : 신규 GTM에 삽입
– 데이터영역용 : 기존 GTM에 삽입

●3. GTM > 관리자 > 컨테이너 가져오기 > 컨테이너 파일 선택 > 다운 받은 json 형식의 파일 선택 > 작업공간 선택 > 기존 (Default Workspace) > 가져오기 옵션 – ★병합★ > 충돌하는 태그, 트리거 및 변수를 덮어씁니다 > 확인

●4. 사용할 GA4 태그와 구성 태그를 상황에 맞춰서 선택
– 아이프레임용 : 신규 GA4 구성 태그 생성 후, json에 있던 GA4 이벤트의 구성태그를 해당 신규 GA4 구성태그로 설정.
– 데이터영역용 : 기존 GA4 구성 태그를 설정. (GA4를 기존에 활용하고 있다는 가정)