ENGLISH 무료 진단 신청

[GTM] 개발자 없이 AI로 구글태그매니저 맞춤 자바스크립트 변수 생성하기

개발자 없이 AI활용 구글태그매니저 맞춤 자바스크립트 변수 생성하기 최근 다양한 산업 군에서 AI 활용이 활발히 이루어지고 있으며, 마케팅 분야 역시 예외가 아닙니다. 머신러닝 기반의 무효 타겟 제거, 유효 타겟 범위 확대(플랫폼 최적화),

[GTM] 개발자 없이 AI로 구글태그매니저 맞춤 자바스크립트 변수 생성하기
  • 9월 15일
  • 3분 분량

[GTM]

개발자 없이 AI활용 구글태그매니저 맞춤 자바스크립트 변수 생성하기

안녕하세요! 🙋‍♀️

데이터 마케팅 전문 에이전시 지아이코퍼레이션

harry 입니다.

최근 다양한 산업 군에서 AI 활용이 활발히 이루어지고 있으며,

실제 업무 효율성 향상에도 큰 기여를 하고 있습니다.

마케팅 분야 역시 예외가 아닙니다. 머신러닝 기반의 무효 타겟 제거, 유효 타겟 범위 확대(플랫폼 최적화),

성과 예측, 비효율 요소 제거, 크리에이티브 개선 등 여러 영역에서 AI의 역할이 강화되고 있는데요,

특히

데이터 분석을 위한 핵심 전제인 ‘추적(Tracking)’ 설정 또한

AI를 통해 정합성 높은 데이터를 더욱 손쉽게 확보

할 수 있습니다.

과거에는 개발자의 지원이 필수적이었던 부분을 AI가 직접 보완할 수 있게 되면서,

데이터 분석과 추적 범위 확장 측면에서 새로운 가능성이 열리고 있습니다.

오늘은

AI를 활용해 구글 태그매니저(GTM)에서 맞춤 자바스크립트 변수를 생성하는 방법

을 단계적으로 안내드리겠습니다.

구글태그매니저 기본 제공 변수의 한계

(구글태그매니저 기본 제공 페이지 변수)

(구글태그매니저 기본 제공 클릭 변수)

우선,

변수라는 것은 말 그대로 '변하는 수치'로써, 태그매니저가 설치된 웹사이트에서 확인 가능한

페이지, 클릭, 이벤트, 스크롤, 동영상 등 요소

들이라고 이해하실 수 있습니다.

예를 들면, 웹사이트 내 메뉴바를 클릭할 경우, 메뉴바의 클릭 텍스트와 클릭 URL 등 여러 요소들이

모두 변수에 해당한다고 볼 수 있습니다.

https://blog.naver.com/gicorp/223156453432

태그매니저에서 꼭 필요한 개념 (1)태그 (2)트리거 (3)변수에 대한 자세한 설명은

위의 태그매니저 스크롤뎁스 추적하기 편을 참고해 주세요!

구글태그매니저에서 제공하는 기본 변수 중

페이지, 클릭, 이벤트 변수는 실무에서 가장 많이 사용하는 유형 중 하나입니다.

반면, 전자상거래 혹은 유저 ID 등 특수한 영역을 추적해야 하는 경우,

개발자를 통한 이벤트를 자체 발생시키거나 데이터레이어푸쉬 작업이 선행되어야 합니다.

즉, 개발자의 도움 없이는 기본 제공 변수 외 추가 데이터를 수집하기 쉽지 않다는 한계가 있습니다.

맞춤 자바스크립트 변수란?

맞춤 자바스크립트 변수란,

기본 제공 변수 외 원하는 조건의 데이터(function)를 수집할 수 있도록(return)

사용자가 직접 자바스크립트 구문을 통해 생성한 변수

를 말합니다.

예를 들어, 앞에서 언급한 기본 제공 변수(클릭, 페이지, 이벤트 정보 등) 외

사이트 내

추가적인 정보에 대해서는 태그매니저가 인식할 수 없기 때문에

별도의 변수를 생성하는 작업

이 필요하며,

개발자 혹은 퍼블리셔를 통해 자바스크립트 변수를 추가하게 됩니다.

*특정 페이지에서 클릭하지 않아도 텍스트를 가져와야 할 때

*특정 페이지에서 가격(가치)를 추적해야 할 때

*특정 페이지에서 품목 이름과 옵션을 추적해야 할 때

이와 같은 상황에서 맞춤 자바스크립트 변수를 활용하면,

태그매니저가 기본적으로 인식하지 못하는 정보를 직접 수집할 수 있습니다.

AI를 활용한 맞춤 자바스크립트 변수 생성 방법

그럼 AI를 활용하여 맞춤 자바스크립트 변수를 생성하고,

위의 박스 표시 부분 '댓글'의 값을 추적해 보겠습니다.

우선, 댓글이 완료되었을 때

"맞춤 자바스크립트 변수"라고 기재한 부분에 대해 가져올 수 있는 변수는 없는 기본 상태입니다.

생성형 AI에 요청하기 전,

검사 도구를 통해서 추적 영역에 대한 요소

를 복사합니다.

(F12 > 화살표로 추적 영역 선택 > 스크립트 중 element 복사)

그리고 생성형 AI에 상기와 같이 프롬프트를 입력합니다.

저는 주로 GPT를 활용하는데, 코파일럿 또는 제미나이 등 여러 AI를 사용하셔도 무방합니다.

(1) 역할 설정

(2) 목적 설명

(3) 조건 안내

위의 구조로 설명하게 되면 아래와 같이 변수를 생성할 수 있는 코드를 확인할 수 있습니다.

앞서 언급한 function으로 시작하여 return값을 구현하는 구조로 실행됩니다.

복사한 코드를

변수 > 사용자 정의 변수 > 맞춤 자바스크립트 설정에서 붙여 넣고 제출

해 주세요.

그럼 다시 댓글이 완료되었을 때 텍스트 값이 확인 가능한 지 테스트해 보겠습니다.

실제 댓글 작성을 완료했을 때 텍스트 값(AI활용~완료하였음) 텍스트가

정상적으로 수집된 것을 확인할 수 있습니다.

구글애널리틱스 맞춤 자바스크립트 변수 추출

AI를 통해 맞춤 자바스크립트 변수 생성 및 확인되었다면,

최종적으로 애널리틱스로 데이터를 점검하는 단계가 남았습니다.

새로운 이벤트 태그를 생성하되,

이벤트 매개변수에는 값을 가져올 수 있도록 변수 처리({{중괄호}})

를 반드시 해주셔야 합니다.

설정을 완료한 후 애널리틱스 디버그 모드로 접속하였을 때

태그매니저에서 설정한 값(AI활용~하였음)이 정상적으로 수집되고 있음이 확인됩니다.

마지막으로, 맞춤 보고서에서 댓글 코멘트를 추출할 때

'comment'라는 측정기준을

확인하기 위해 위와 같이 애널리틱스 맞춤 측정기준을 꼭 설정

해 주세요!

위에 설명한 내용은 단순히 댓글을 추출하는 내용이지만,

실제로 전자상거래 product, value 등 값을 추출할 때도 매우 유용한 방법입니다.

또한, 웹사이트에 자체적으로 스크립트를 삽입하여 데이터레이어를 발동시키는 방법보다

1차 검증이 가능하기 때문에 더 안정적인 방법입니다.

앞으로도 AI를 활용한 데이터 분석에 소요되는 리소스를 줄이고 생산성을 더 확대할 수 있는

유용한 방법에 대해 안내드리겠습니다^^

그럼 다음 콘텐츠에서 만나요!

안녕

👋

데이터 마케팅 전문 에이전시 | 지아이코퍼레이션

퍼포먼스 전문 온라인광고대행사 지아이코퍼레이션은 온라인광고를 통해 클라이언트에 좋은 영향력을 제공하며 궁극적인 성장을 위한 전략을 제안합니다. (무료 상담하기)

www.gi-corp.co.kr

이 글은 네이버 블로그에도 실려 있습니다.

이전 글[마케팅] 마케팅 퍼널 단계별 타겟의 전략적 광고 활용 방법(feat.구글&메타광고다음 글[AI] 업무 활용성 좋은 AI 툴 소개

지금 무엇이
안 되고 있나요?

잘 되고 있는 것보다, 안 되는 것을 알려주세요.
원인부터 같이 찾겠습니다.