구글 애널리틱스(gtag), 동일 사이트에 추적코드 두 개 이상 적용하기

작업할 때 대부분 1개를 넣지만 간혹 2개 이상을 삽입 요청하는 경우가 있어 정리해둔다.

(예시는 구글 가이드 사이트에서 발췌)

 

1개만 삽입할 경우는 아래와 같은데

<!-- Global site tag (gtag.js) - Floodlight -->
<script async src="https://www.googletagmanager.com/gtag/js?id=DC-ZZZZZZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'G-XXXXXX');
</script>

 

여기서 2개 이상 삽입이 필요한 경우, 공식문서를 보면 각 페이지에는 전체 사이트 태그 인스턴스가 하나만 있어야 하기에 추가 제품마다 새로운 전체 사이트 태그를 복사하면 성능 문제가 발생하고 코드를 유지하기가 더 어려워질 수 있다고 한다. 해서 이미 소스가 있는 경우 추가할 소스의 config()부분만 가져와 아래처럼 추가하면 된다고 한다. 

 

<!-- Global site tag (gtag.js) - Floodlight -->
<script async src="https://www.googletagmanager.com/gtag/js?id=DC-ZZZZZZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'G-XXXXXX');
  gtag('config', 'AW-YYYYYY'); /* 추가 */
  gtag('config', 'DC-ZZZZZZ'); /* 추가 */
</script>

 

이렇게 하고 이벤트 추적도 넣어보니 잘 되었다.

 

참고 : 

https://amina.co.kr/bbs/board.php?bo_table=apms_qa&wr_id=119381

https://developers.google.com/tag-platform/gtagjs/install