구글 애널리틱스 내부링크/외부링크 클릭 이벤트 일으키기

페이지에는 매우 다양한 링크들이 포함 되어 있습니다. 

 

이러한 링크에 하나하나 클릭에 대한 이벤트를 만들기에는 엄청난 노가다가 필요할 수 있습니다. 

 

이번에는 javaScript 를 통해 페이지 안에 있는 모든 링크 클릭 시에 구글 애널리틱스 이벤트가 발생하도록 설정 해보겠습니다. 

 

먼저 개발자 도구에서 콘솔창을 열고 아래의 코드를 붙여넣기 하고 실행 시켜보겠습니다. 

(function(){
  // a 태그 모두 선택
  var links = document.getElementsByTagName('a');
  // a 태그 요소들을 순차적으로 조회
  for ( var i = 0; i < links.length; i ++ ) {
        // 만약 a 태그 요소 중에 링크로 이동되는 href 태그를 가지고 있는 요소가 있다면
        if(links[i]["href"]) {
        	// 개발자 콘솔에 해당 링크를 출력하겠다. 
            console.log(links[i].href)
        }
  }
})()

저는 제 사이트에서 실행 하였는데 어느 사이트에서 실행하셔도 큰 문제는 없습니다. 

 

해당 코드를 실행하면 페이지안에 있는 모든 링크가 출력 될 것 입니다. 

이렇게 자바스크립트를 통해 페이지 안에 존재 하는 링크 (a href 태그) 를 모두 불러 올 수 있습니다. 

 

그러면 이제 클릭 하였을 때 해당 링크에 대한 내용을 구글 애널리틱스 이벤트로 전송해주는 코드를 작성해보도록 하겠습니다. 

(function(){
  // a 태그 모두 선택
  var links = document.getElementsByTagName('a');
  // 같은 도메인에 해당하는 링크인지 체크 하기 위해 현재 접속중인 도메인 저장
  var comp = new RegExp(location.host);
  // a 태그 요소들을 순차적으로 조회
  for ( var i = 0; i < links.length; i ++ ) {
  // 만약 a 태그 요소 중에 링크로 이동되는 href 태그를 가지고 있는 요소가 있다면
  if(links[i]["href"]) {
  // 클릭되었을 때 이벤트를 일으킴
  links[i].onclick = function () {
  // 링크에 도메인이 있는 경우 내부링크 , 그렇지 않은 경우 외부 링크로 분류
  let linkType = comp.test(this.href) ? "내부링크" : "외부링크"
  // 클릭되었을 때 구글 애널리틱스 이벤트를 일으킴 , 이벤트 액션은 링크클릭 , 카테고리는 내부링크인지 외부링크인지 , 이벤트라벨은 클릭한 링크를 나타냄
  gtag("event","링크클릭",{"event_category" : linkType , "event_label" : this.href})
  };
  }
  }
})()

설명은 // 부분 주석을 참고 부탁 드리며 이 코드를 이제 제 블로그에 심어보도록 하겠습니다. 

해당 스크립트는 클릭 시에 이벤트가 발생하도록 하는 스크립트 이기에 최대한 모든 요소가 로딩된 후에 실행 되는 것이 좋기 때문에 사이트 가장 하단에 배치 하였습니다. 구글 태그매니저를 사용하신다면 html 태그로 window Loaded 나 Dom ready 트리거에 실행되도록 설정해주면 됩니다.

 

이제 제 블로그 전체에 링크 클릭 시 이벤트가 발생하도록 설정 되었습니다. 

 

 

클릭 시 이벤트도 잘 올라오네요! 이렇게 자바스크립트를 사용하여 링크 클릭에 대한 이벤트를 일으킬 수 있습니다. 

 

궁금 하신 부분이 있다면 댓글로 알려주세요! 

 

감사합니다 :)