[ GA ] 게시물 내 이동 링크 이벤트 설정

본문으로

안녕하세요. 녀기입니다.

 

GA 강의도 어느덧 거의 다 들어가고

 

제 블로그에서 보고 싶은 로그는 어느 정도 설정을 해 가고 있습니다.

 

그 중에서 하나 기록해 놓고 싶은 부분이 있어 포스팅을 하게 됐슴돠.

 

(여전한 딴 짓)

 

 

 

제 블로그 글을 읽으신 분들이라면 알겠지만,

 

저는 사담이 길죠(?)

 

(근데 읽은 사람이 있을까)

왜냐면 이 포스팅이 정보 전달의 목적도 있지만

 

거의 제 일기장이거든요(?)

 

(그럴거면 그냥 하나 카테고리를 만들어라..)

 

제 사담 때문에 아무도 글 안 읽고 도망갈까봐

 

'본문으로' 혹은 '목차로' 갈 수 있는 링크 달아놨고,

 

심지어 목차 내에서도 해당 글로 갈 수 있는 링크 달아놨습죠.

 

 

 

그렇습니다. 저는 지금

 

제 사담을 읽지 않고 목적으로 가는 사람이 얼마나 있는지 확인하고 싶어서 

 

해당 이벤트를 설정했습니다!!!!

 

(섭섭하고 막 그래ㅠㅠㅠㅠ)

 

 

 

힘든 과정이었습니다....

 

내가 지금 GA를 하는건지 js를 공부하는건지....

 

그 일련의 과정 들어가 보시죠!!

 

(심지어 이번 글에도 본문으로 가는 링크 달려있습니다.)

---

본문 내 링크 클릭 이벤트

fig 1. 본문 내 링크의 이름

 

일단 클릭하는 링크의 이름을 저장하겠습니다.

 

클릭이 되는 객체의 innerText를 수집하겠습니다.

 

(나중에 동일한 기능을 가지는 모든 변수를 하나로 합치겠습니다.)

 

fig 2. 하이퍼링크 이름

 

fig 2는 제가 설정한 href 속성의 이름을 가져옵니다.

 

본문으로 갈 때는 '#main', 목차로 갈 때는 '#list', 목차에서 해당 게시물로 갈 때는 '#list{N}' (N은 자연수)

 

형태로 설정해 놓았습니다.

 

 

 

클릭한 객체의 href 속성 값을 가져온 후,

 

해당 정규 표현식으로 하이퍼링크 이름을 가져옵니다.

 

 

 

var reg_exp = /#[a-zA-Z가-힣]+/ 는

 

#과 글자(영어+한글)가 하나 이상 포함돼 있는 정규 표현식이고

 

.match[0]로 정규 표현식에 해당하는 string을 반환합니다.

 

 

 

그리고 추출된 값에서 #을 제거합니다.

---

fig 3. 이동 링크 클릭 이벤트 설정

 

이벤트 이름을 설정하고

 

위에서 만든 변수를 매개변수로 설정합니다.

---

그리고 링크 클릭 트리거를 설정해야 합니다.

 

기존에 <a> 태그 설정을 뒤죽박죽으로 해 놔서

 

두 가지 트리거를 설정한 뒤 'or'로 묶어줘야 합니다.

 

 

 

첫 번째로 <span> 태그 안에 <a> 태그가 있을 때 입니다.

fig 4. span > a

 

이벤트 조건을 'Click Element'로 설정하고 'CSS 선택 도구와 일치' 선택한 뒤,

 

'span > a'로 설정해 줍니다.

 

 

 

두 번째는 <li:nth-child> 형태로 돼 있는 태그가 있을 때 입니다.

fig 5. 부모 태그가 OL, UL일 때

 

<a> 태그의 부모 태그가 <li:nth-child> 형태인 경우가 있는데,

 

처음에는 정규 표현식으로 설정하려고 했지만 실패했습니다.

 

 

 

그래서 부모 태그를 두 번 찾아

 

태그 이름이 "OL" 또는 "UL"이면 True를 반환하게 설정했습니다.

fig 6. 해당 링크의 부모의 부모가 true일 때

 

두 번째 경우의 트리거는 fig 5의 변수가 'true'를 반환할 때 작동하도록 설정했습니다.

---

위 트리거는 본문 내 링크 뿐만 아니라 조건을 만족하는 모든 링크 클릭에서 작동하므로,

 

본문 내 링크에서만 작동하게 했습니다.

fig 7. class 이름이 'area_view'인 부모 태그 찾기

 

본문의 <div> 태그의 class 이름은 'area_view' 입니다.

 

링크의 부모 태그 중 선언한 class 이름과 동일한 부모가 있다면 'true' 반환,

 

아니면 false를 반환하도록 설정했습니다.

 

 

 

이후

fig 8. 변수 조건 추가

 

fig 7의 조건을 두 개의 트리거에 'and' 조건으로 추가해 줍니다.

---

이벤트를 게시하고 debug_view로 확인하면

fig 9. 이벤트 발생

 

해당 이벤트에 link_name과 link_name_hyper가 저장된 것을 확인할 수 있습니다.

---

아 이번에 너무 빡셌습니다...

 

자바스크립트 지식이 없다보니 계속 검색하면서 하느라....

 

그리고 저만 그런건지 모르겠는데,

 

맞춤 자바스크립트 내부에 const랑 let 변수는 선언할 수 없는 것 같더라구요?

 

저것 때문에 꽤 오랜 시간이 걸렸습니다....

 

오늘을 기점으로 블로그와 GA의 이벤트를 연결하는 것은 끝날 것 같구요.

 

이제부터 2주 정도 bigquery에 데이터를 쌓아보고

 

looker studio로 시각화도 해 보겠습니다.

 

기대가 되네요 아주♥

그럼 저는 이제 힘들어서 쉬겠습니다.....

 

뿅입니다요~