GA clientId 깔끔하게 가져오는 방법 (how to get the GA clientId)

GA clientId 깔끔하게 가져오는 방법 (how to get the GA clientId)

이번 포스팅은 웹 자바스크립트(Javascript) 환경에서 GA(Google Analytics) clientId를 깔끔하게 가져오는 방법에 대해서 소개하고자 합니다. 저 또한 Nuxt.js(Vue)에서 GA 관련 로직을 작성하는 중에 새로운 방법을 알게 되어 공유하게 되었습니다.

기존방식

기존에 GA clientId를 가져오기 위해 사용했던 코드는 아래와 같습니다. ga 객체의 getAll 메서드를 활용해서 모든 trackers를 가져온 후 0번째 인덱스의 tracker를 가져온 후 clientId를 가져오는 예시입니다.

ga.getAll()[0].get('clientId');

 

변경

개선된 방식은 아래와 같습니다. window.ga객체가 loaded되면 콜백함수가 실행되고, 콜백함수의 인자값이 바로 tracker가 되는데 여기서 tracker 객체의 get 메서드를 사용해서 clientId를 바로 가져와서 사용하면 됩니다.

window.ga((t) => {
	const clientId = t.get('clientId');
}

모든 trackers 객체들을 가져와서 거기서 찾아서 쓰는 방법보다 위 방법이 좀 더 직관적이고 깔끔하지 않나요?

추가사항

만약 페이지에 1개 이상의 tracker가 존재한다면, 기존에 사용하듯이 인덱스 0을 꺼내서 사용하게 되면 원하는 tracker가 아닐 가능성이 있으므로 아래와 같이 clientId를 찾아내야 합니다.

function() {
  try {
    var trackers = ga.getAll();
    var i, len;
    for (i = 0, len = trackers.length; i < len; i += 1) {
      if (trackers[i].get('trackingId') === "ID-PROPERTY") {
        return trackers[i].get('clientId');
      }
    }
  } catch(e) {}  
  return 'false';
}

여기서 ID-PROPERTY은 추적코드(i.e. UA-XXXXX-XX)입니다.