[ GA ] 카테고리 클릭 이벤트 설정
본문으로
안녕하세요. 녀기입니다.
오늘도 돌아온 GA 포스팅~~~
맞춤 자바스크립트를 이용해서 카테고리 클릭 이벤트를 설정해 볼게요!
바로 렛츠고!
맞춤 자바스크립트를 활용한 카테고리 클릭 이벤트
원래 하던 데로 이벤트를 만들어 봅시다.
'측정 ID' 부분이 동적 변수로 돼 있는데,
저건 다음에 해 볼게요.
(변수를 생성할 때, 측정 ID를 '상수' 취급해 생성하면 됩니다.)
이벤트 생성이 끝나면 트리거를 생성해 줍니다.
카테고리는 클릭하는 순간 이동하므로 '클릭 - 링크만'으로 트리거를 구성해 줍시다.
모든 링크가 아닌 카테고리 클릭만 해당하므로
'일부 링크 클릭'을 체크해 주고
조건을 'Click Classes'로 설정합니다.
이는 태그의 class 속성을 참조하겠다는 의미입니다.
티스토리 블로그에 들어가서 가장 큰 카테고리를 우클릭하면 아래와 같이 나오는데(fig 3)
'검사'를 클릭하면 해당 페이지의 HTML 구성을 볼 수 있고,
클릭한 부분의 태그를 확인할 수 있습니다.
카테고리의 class 속성의 이름은 'link_item' 입니다.
즉 저는 트리거의 'Click Classes'가 'link_item'과 같은 카테고리를 클릭했을 때만 이벤트를 발생시킬 수 있습니다.
다른 카테고리도 class 속성의 이름이 동일하므로
다른 카테고리를 클릭했을 때도 이벤트가 발생할 것입니다.
a 태그의 아래 화살표를 클릭하면 내용과 자식 태그를 볼 수 있는데,
해당 태그의 '-- Data --'라고 텍스트가 저장돼 있습니다.
이 부분을 가져온다면, 카테고리를 클릭했을 때 카테고리의 이름을 알 수 있을 것입니다.
fig 6를 참고해 동적 변수를 생성하겠습니다.
새 변수를 만들어 주고
변수 유형은 '맞춤 자바스크립트'로 설정해 줍니다.
그리고 아래에 함수를 선언해 주는데
자바스크립트를 몰라도 진행하는데 큰 무리는 없었습니다.
(왜냐면 저도 자바스크립트 모르거든요~~)
중괄호 안에 return 할 값을 설정하는데,
{{Click Element}}는 기본적으로 제공하는 동적 변수이고
innerText는 해당 태그 안에 있는 텍스트를 반환해 줍니다.
즉, 제가 클릭한 카테고리의 태그 안에 있는 텍스트를 반환해 주고,
위에서 본 '-- Data --'와 같은 카테고리 이름을 줄 것입니다.
생성한 동적 변수를 이벤트 매개변수의 값으로 설정하고 저장한 뒤 게시합시다.
그 후 'DebugView'에서 확인하면(fig 8)
이벤트와 매개변수-값이 정상적으로 실행되는 것을 확인할 수 있습니다.
그 후 카테고리 이름을 맞춤 정의로 생성해 줍니다.
오늘 하루 종일 들은 강의는 맞춤 자바스크립트를 사용한 내용이라
다 비슷합니다.
강사님과 제 티스토리의 스킨이 달라서
저가 좀 다르게 짠 내용도 있는데
위 내용이 모두 포함하므로 포스팅하지는 않겠습니다.
(어차피 자바스크립트 부분을 수정한거라 자바스크립트를 공부하면 해결될 부분이라 생각하거든요ㅎㅎ)
어떻게든 이번 달 안에 다 들어버리겠다는 마음으로 듣고 있는데
전혀 집중이 안 되네요....
(정신차려 이 각박한 세상 속에서!!)
저는 다음에 다시 돌아올게요...
어우 힘들어ㅋㅋㅋㅋㅋ
그럼 뿅!
