안녕하세요, 인프랩 프론트엔드 개발자 빠삐코입니다.

데이터 기반 의사결정에서 정확한 사용자 행동 데이터 수집은 무엇보다 중요합니다. 저희 팀도 Google Tag Manager(GTM) 를 통해 Google Analytics, Mixpanel 등 다양한 분석 도구로 이벤트를 전송하며 사용자 데이터를 수집하고 있습니다.

이를 위해선 정해진 텍소노미(Taxonomy)에 따라 GTM에 태그(Tag), 트리거(Trigger), 변수(Variable)를 설정하는 작업이 필요한데요. GTM 에서 제공하는 웹 어플리케이션 상에서 GTM 요소를 하나하나 수작업으로 설정하는 것은 크고 작은 문제를 일으켰습니다.

이러한 문제를 해결하기 위해, 사이드 프로젝트로 텍소노미 기반의 GTM 자동화 도구를 개발하게 되었습니다. 이번 글에서는 그 과정과 고민했던 지점들을 공유드리고자 합니다.

문제 상황

저희 팀은 이벤트 이름, 트리거 조건, 파라미터 등이 정의된 텍소노미를 Google 스프레드시트로 관리하고 있습니다.

한 페이지에 50개 이상 이벤트가 정의된 경우도 있으며, 이 데이터를 바탕으로 GTM에서 수집 설정을 합니다.

이 데이터를 기반으로 GTM에 태그, 트리거, 변수를 설정해야 하는데요.

GTM은 웹에서 이벤트 수집 및 전달을 관리할 수 있게 해주는 도구로, 이벤트 발생 시 트리거가 조건에 맞으면 연결된 태그를 실행하고, 태그는 변수(파라미터)를 참조해 데이터를 수집합니다.

저희는 Mixpanel, Google Analytics, Hackle 등 여러 도구를 사용하고 있고, 각각에 맞춰 태그를 설정해야 합니다.

그런데 이 과정이 전부 수동으로 이루어지다 보니 이벤트 누락이나 파라미터 오탈자 같은 문제를 피할 수 없었습니다.

그래서 이 과정을 자동화하는 웹 기반 도구를 직접 만들기로 결정했습니다.

구현

자동화 도구를 설계하면서 다음과 같은 요구사항을 정의했습니다:

• 텍소노미 데이터를 로드
• 로드된 데이터를 기반으로 GTM 요소 자동 생성
• GA, Mixpanel, Hackle 등 다양한 분석 도구 지원
• 생성 전 미리보기 및 생성 후 결과 확인 가능
• 이미 생성된 태그가 있는 경우 파라미터만 수정 또는 재생성

텍소노미 데이터를 로드

초기에는 텍소노미 스프레드시트 내용 자체를 복사해 붙여넣고, 붙여넣은 데이터를 기반으로 JSON 데이터를 만드는 방식으로 구현했지만, 붙여넣은 스프레드시트의 범위나 텍스트의 형태 오류 발생 시 디버깅이 어려웠습니다. 이를 개선하기 위해, 스프레드시트의 범위 링크를 입력하면 Google Sheets API를 통해 데이터를 JSON으로 변환하도록 변경했습니다.

GTM 요소 자동 생성

GTM의 태그, 트리거, 변수를 조작하기 위해 Google Tag Manager API를 사용했습니다. 이 API는 분당 호출 수 제한이 있기 때문에, 요청 단위를 나눠서 처리하고, 429 Too Many Requests 응답이 오면 5초 대기 후 재시도하는 로직을 적용했습니다.

for (let index = 0; index < currentTriggersData.length; index++) {
  try {
    await addTriggerMutate({
      workspaceId,
      variable: currentTriggersData[index],
      containerId,
    });
  } catch (error) {
    if (error instanceof GtmApiError && error.statusCode === "DELAY") {
      await delay(5_000);
      await addTrigger(index);

      return;
    }

    // 별도 에러처리...
  }
}

다양한 도구에 맞춘 템플릿 지원

Mixpanel, GA4, Hackle 등 각 도구는 GTM 태그의 JSON 구조가 서로 다릅니다. 이를 해결하기 위해 각 태그 유형에 맞는 템플릿을 구성했고, GTM의 컨테이너 내보내기 기능을 활용해 JSON 구조를 분석하고 적용했습니다. 추후 도구가 추가되더라도 템플릿만 정의하면 쉽게 확장할 수 있도록 구조를 설계했습니다.

변경사항 미리보기 및 결과 확인

생성 전/후 데이터를 검토할 수 있도록, react-data-table-component 라이브러리를 활용해 간단한 테이블 UI를 구현했습니다. 별도의 검색 기능은 넣지 않았지만, 한눈에 파악이 가능하고 변경 전후 데이터를 비교하는 데 충분했습니다.

이미 생성된 태그 수정 방식

기존 태그가 있는 경우, 단순히 파라미터만 수정하는 기능을 고려했지만, 텍소노미 기준으로 전체를 최신화하는 방향을 선택했습니다. 기존 태그를 삭제하고 새로 추가하는 방식이며, GTM에서는 변경 사항의 diff를 제공하므로 게시 전 검토도 용이했습니다.

결과

자동화 도구의 도입은 다음과 같은 성과를 가져왔습니다:

• 작업 속도 60배 향상
  50개 이벤트 세팅에 약 1시간 걸리던 작업이 1분으로 단축되었습니다.
• 데이터 정확성 향상
  수작업에서 발생하던 오타, 누락을 100% 텍소노미 기반 자동화로 방지할 수 있었습니다.
• 협업 효율 증가
  기획자는 텍소노미만 작성하면 되며, 개발자는 도구를 실행하면 되므로 불필요한 커뮤니케이션 비용이 사라졌습니다.
• 대규모 태그 이관 문제 해결
  GTM 컨테이너 용량이 99%에 도달했을 때, 이 도구 덕분에 대규모 이관 작업을 빠르고 안정적으로 수행할 수 있었습니다.

결론

뭐야, 별거 아니잖아

맞습니다. 생각보다 복잡한 기능은 아닙니다. 대부분은 이미 제공되는 API와 라이브러리를 활용했고, 구현에도 큰 시간이 들지 않았습니다.

제가 전하고 싶은 메시지는, 문제를 정확히 정의하고 작게 해결하는 도구만으로도 충분히 큰 효용을 만들 수 있다는 것입니다. AI 기술이 빠르게 발전하는 요즘, 막연한 두려움보다는 ’우리가 해결할 수 있는 문제는 무엇인가’에 집중하는 시간이 더욱 가치 있다고 생각합니다. 그리고 그 시간이 함께 일하는 동료의 시간을 더 가치 있게 만들어준다면 더할 나위 없겠죠.

이 경험이 누군가의 작은 시작이 되기를 바랍니다. 긴 글 읽어주셔서 감사합니다.

💡 덧붙이며

• 이 글에 등장한 자동화 도구는 현재 실제 업무에 활용 중이며, 기능 개선과 확장을 계속 이어가고 있습니다.
• 텍소노미, GTM, 데이터 수집 자동화 관련해 궁금한 점이 있으시면 댓글로 남겨주세요. 확인 후 답변드리겠습니다.