GA4 복사 이벤트 추적 2편: 드래그를 넘어 '복사 버튼'까지 잡는 법 (GTM)

지난 1편에서는 마우스 드래그를 통한 복사 이벤트를 추적했다. 하지만 요즘 블로그의 꽃은 '코드 복사 버튼'. 오늘은 드래그를 넘어, 클릭 한 번으로 일어나는 복사까지 완벽하게 추적하는 방법을 공유한다.

이 화면을 보기 위해 9시간 넘게, 태그관리자 제출 버튼을 20번 눌렀다!!

GA4에서 드래그와 버튼복사 확인하기

새벽까지 겪은 시행착오를, 단 10분 만에 따라 할 수 있게 정리했다. 10분은 너무 짧은가?!

태그관리자로 버튼복사 이벤트 추적하기 (GA4 연동)

1단계: GTM에서 새로운 변수 만들기 - 생략 가능

아래 '5단계의 맞춤 자바스크립트'가 모든 일을 다 하기 때문에, 1단계의 변수는 생략 가능하다.

변수 > 사용자 정의 변수 [새로 만들기]
이름: DLV - copied_text
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: copied_text (버튼 코드에 쓴 이름과 똑같이!)
저장.

태그관리자 변수 만들기(DLV - copied_text)

2단계: 리스너 코드 변경 (GTM 맞춤 HTML)

기존에 만든 태그 JS - Copy Listener로 가서 아래의 복사버튼 스크립트를 복사해서 덮어쓴다.

HTML


<script>
  document.addEventListener('copy', function(e) {
    // 현재 마우스로 드래그한 텍스트 가져오기
    var selectedText = window.getSelection().toString();
    
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'copy',
      'copied_text': selectedText // 드래그한 텍스트를 함께 보냄!
    });
  });
</script>

태그관리자 태그(JS - Copy Listener) 변경

3단계: GTM 트리거 새로 만들기 - '버튼 클릭용'

버튼 클릭을 감지할 수 있도록 트리거 조건을 확장해야 한다.

트리거 > [새로 만들기]
이름: Click - Copy Button
트리거 유형: 클릭 - 모든 요소
트리거 실행 조건: 일부 클릭
조건 설정:

첫 번째 칸: {{Click Classes}}

두 번째 칸: 정규 표현식과 일치(대소문자 무시)

세 번째 칸: gemini-copy-btn|text-placeholder

저장을 누른다.

태그관리자 트리거 만들기(Click - Copy Button)

4단계: 기존 GA4 태그에 Click - Copy Button 트리거 연결하기

다시 만든 버튼 클릭용 트리거가 태그를 작동시키도록 연결해줘야 한다.

왼쪽 메뉴 [태그]로 가서, 기존에 만들어 둔 GA4 Event - Content Copy 태그를 클릭해 연다.
화면 하단의 [트리거] 영역을 클릭.
우측 상단의 연필모양 > + 버튼을 눌러, Click - Copy Button 트리거를 선택한다.
저장을 누른다. (이 태그에는 트리거가 2개 달려있어야 함: Event Copy + Click - Copy Button)
[제출]을 누른다.

태그관리자 GA4 태그에 트리거(Click - Copy Button) 연결

※ 중요: 태그의 매개변수 값(Value)은 {{JS - Copied Text Content}}로 해야 아래 '5단계'의 맞춤 자바스크립트가 정상 작동한다. {{DLV - copied_text}}가 아님에 유의!

5단계: 변수 새로 만들기

이미 DLV 변수가 버튼 클릭 시 데이터를 못 가져오고 있으니, '직접 뺏어오는' 변수를 새로 만든다.

변수 > [새로 만들기]
이름: JS - Copied Text Content
유형: 맞춤 자바스크립트
아래 코드를 복사/붙여넣기.

JavaScript


function() {
  try {
    // 1. 현재 화면에서 드래그(선택)된 텍스트가 있는지 확인
    var selectedText = window.getSelection().toString().trim();
    
    // 2. 만약 드래그된 내용이 있다면 그걸 최우선으로 반환
    if (selectedText.length > 0) {
      return "드래그: " + selectedText.substring(0, 100);
    }
    
    // 3. 드래그된 게 없다면 클릭된 요소가 '복사 버튼'인지 확인
    var el = {{Click Element}};
    var isButton = el && (el.classList.contains('gemini-copy-btn') || el.closest('.gemini-copy-btn'));
    
    if (isButton) {
      var box = el.closest('.gemini-code-box');
      var codeText = box ? box.querySelector('pre').innerText.trim() : "";
      return "버튼복사: " + codeText.substring(0, 100);
    }
    
    return "코드박스 단순클릭";
  } catch(e) {
    return "데이터 추출 실패";
  }
}

이 코드는 '드래그'인지 '버튼 클릭'인지 스스로 판단해서 스마트하게 글자를 긁어온다.

태그관리자 변수(JS - Copied Text Content) 만들기

이 글을 써야 할지 말아야 할지 살짝 고민이 되었다. 새벽까지 9시간 넘게 사투?를 벌인 끝에 버튼 클릭 복사 이벤트는 성공했지만, 끝나고 나니 헷갈려...
차분한 마음으로 정리해서 올려 본다.

드래그 복사 부분부터 정리하자면,

드래그 추적 기초: 변수(JS - Copied Text) → 트리거(Event - Copy) → 태그(GA4 Event - Content Copy).
리스너 설치: 태그(JS - Copy Listener) → 제미나이 스타일 코드 블럭에 자바스크립트 추가.
/* 여기까지가 1편 */
버튼 추적 확장: 변수(DLV - copied_text) 시도 → 태그(JS - Copy Listener) 코드 변경 → 트리거(Click - Copy Button) 생성.
최종 통합 및 제출: 변수(JS - Copied Text Content)로 통합 → 태그(GA4 Event - Content Copy)에 트리거(Click - Copy Button) 연결 후 제출!

오늘의 한마디

태그관리자 전문가가 혹시 이 글을 본다면 웃겠지만, 난 노트북 반대로 접을 뻔 했다.

unsplash@bethany beck

이 블로그 검색

한스 픽