[로그분석] 롤링배너의 노출수, 클릭수를 알고 싶어요(w. GTM 요소공개상태)

내가 처음 GTM을 세팅하면서 가장 애를 먹었던 부분이 이것이다.

화면을 처음 나왔을 때 뜨는 1번째 배너는 금방 만드는데, 문제는 2번째, 3번째 배너의 경우엔 부정확한 경우가 많았다.

하지만 이것을 정리하면서 나름대로 인사이트가 많이 쌓였고, 이후에 다른 것들을 세팅하는데도 도움이 많이 되었다.

 

우선, 사용하는 트리거는 "요소 공개 상태"이다.

 

이 요소를 구분하는 방법은 2가지다.

하나는 ID이고, 또 다른 하나는 CSS 선택 도구(CSS Selector) 이다.

ID값은 익숙한데, CSS 셀렉터는 여기서 처음봤었다.

 

하지만 문제는 롤링배너에는 보통 ID값이 세팅되지 않는다는 점과, 각 배너별 ID값을 세팅하는데 어려울 수도 있다는 것이다. (페이지 개발 환경마다 다르긴 한데, 처음 내가 세팅했을 땐 배너마다 ID값을 넣기 힘들고, 넣는다 하더라도 하드코딩으로 배너마다 넣어야 한다고 했다. 그리고 배너를 바꾸면 다시 넣어야 한다고..)

 

요즘엔 이런 분석 요소를 고려해서 페이지를 만들지만 옛날 페이지의 경우 이런 고려가 없기에 난감한 경우가 많다.

이럴 때 사용하는 것이 CSS 선택 도구(CSS 셀렉터)다.

홈페이지를 만들 때, 전체적인 구조가 바뀌는 경우는 많지 않다. 예를 들면, 배너는 바꾸더라도 배너를 넣는 위치는 달라지지 않고, 배너의 갯수는 달라지더라도, 배너를 감싸고 있는 아래와 같은 구조는 바뀌지 않을 것이다.

<ul>
    <li>...</li>
    <li>...</li>
    ...
</ul>

 

이를 사용하는 방법은 간단하다.

우선 해당 사이트에 접속 후 개발자 도구를 연다. 그리고 아래 이미지와 같이 화살표 표시를 누른 후, 내가 추적하고 싶은 것을 클릭한다. 배너도 되고, 버튼도 되고, 텍스트도 된다.

 

그럼 아래와 같이 [요소] 창에 해당 영역이 살짝 칠해지면서 보여지는데, 거기서 우클릭 누르면, copy(복사)가 뜨고, CSS selector, CSS 셀렉터, selector 복사 등 다양하게 표현하지만, 아무튼 복사할 수 있는게 뜬다.

확실한 건 JS 경로, 스타일, XPath, outerHTML은 아니라는 거다. 이건 컴퓨터 설정마다 다른 용어로 뜨기 때문에 그냥 모르겠으면 눌러보자.

 

내 사이트의 [자세히 알아보기] 버튼의 경우 CSS selector를 누르면 아래와 같이 복사가 된다.

body > section.hero-section > div > div > button

즉, 바디 안에 히어로 섹션 안에, div 안에 있는 div 안에 있는 버튼. 이라는 의미다.

 

또 다른 예시를 들어보면, "방명록" 버튼을 확인해보자.

#sideproject > div > button:nth-child(9)

 

이건 sideproject라는 ID값 안에 div가 하나 있고, 버튼이 있는데, 9번째 버튼(자손)이란 의미다.

실제 눈으로 보이는 것과 코드가 인식하는 위치는 다르다. 다만 저 위치에 들어가는 건, 텍스트를 수정해도 그대로 9번째 버튼으로 인식한다.

 

마찬가지로 롤링배너도 순서만 정해놓으면, 몇번째 배너인지 알 수 있는 것이다.

---

 

아무튼 그렇게 CSS 선택자로 선택을 했으면, 트리거 시점을 선택해야 한다.

페이지당 한번만 실행할 건지, 요소당(DOM Ready 될 때) 한번만 실행할 건지, 요소가 화면에 표시될 때마다(즉, 계속 롤링되어서 변화가 없어도 노출되면 표시할 건지) 선택하는 것이다.

 

그리고 이벤트 매개변수(필요하면) 설정하고 저장하면 끝이다.

난 보통 Percent Visible(보이는 비율)과 On-Screen-Duration(화면 표시 시간)을 선택한다.

즉, 배너가 절반만 보이다 넘어가는 경우도 있고, 100% 다 보이는 경우가 있을 수 있다. 그리고 1초만 보고 넘어가는 경우랑 3초, 5초간 보고 넘어가는 경우도 있기 때문이다.

Percent Visible는 0~100의 숫자로 나타내며, On-Screen-Duration은 밀리초 단위의 시간이다.

 

 

다만 아래 설명했던, SPA 페이지의 경우는 한 페이지에서 요소만 계속 바뀌기 때문에 이건 적용하기 어렵다.

https://marketerbong.tistory.com/133

 

그 외에는 적용되니 참고하면 된다.