[추적 시리즈] 블로그 이미지 우클릭 방지하고 GTM으로 누가 훔쳐보려 했는지 파악하기 (src, alt 추적)

우클릭 방지는 했는데, 누가 내 이미지를 저장하려 했는지는 알 수 없을까? 단순히 이미지 우클릭 방지를 넘어, 이번엔 차단과 동시에 "이 사람이 어떤 이미지를 복사하려 했다!"라는 정보(src, alt)를 담아 GTM으로 신호를 보내는 방법을 알아보자.

구글 태그 매니저 GTM을 이용한 블로그 이미지 우클릭 추적 및 GA4 이벤트 설정
unsplash@ava sol


블로그스팟 코드 삽입 (HTML 편집)

아래 코드를 복사해서 </body> 앞에 넣어준다.

HTML 

<script type='text/javascript'>
/*<![CDATA[*/
  // 마우스 오른쪽 클릭 이벤트 감지
  document.addEventListener("contextmenu", function(e) {
    
    // 클릭한 대상이 이미지("IMG") 태그인지 확인
    if (e.target.nodeName === "IMG") {
      
      // 1. 이미지일 경우에만 우클릭 메뉴 차단 (기존 기능)
      e.preventDefault();
      
      // 2. GTM 데이터 영역(Data Layer)으로 신호 보내기 (추가된 기능)
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        'event': 'image_right_click_attempt',          // GTM이 인식할 이벤트명
        'target_img_url': e.target.currentSrc || e.target.src || '', // 이미지 주소
        'target_img_alt': e.target.alt || '이름 없음'   // 이미지 Alt 태그 내용
      });
      
    }
  }, false);
/*]]>*/
</script>


구글 태그 매니저(GTM) 세팅

코드에서 던져준 신호(image_right_click_attempt)를 GTM이 받아서 GA4로 예쁘게 포장해 보내야 한다. 변수 → 트리거 → 태그 순서로 세팅한다.

Step 1: 데이터 영역 변수 2개 만들기

1. GTM 좌측 메뉴 [변수] → 사용자 정의 변수 [새로 만들기] 클릭

2. 변수 유형: 데이터 영역 변수 선택

3. 변수 세팅:

  • 첫 번째 변수:
    • 변수 이름: dlv - target_img_url
    • 데이터 영역 변수 이름: target_img_url
  • 두 번째 변수:
    • 변수 이름: dlv - target_img_alt
    • 데이터 영역 변수 이름: target_img_alt

구글 태그 매니저 이미지 우클릭 추적 데이터 영역 변수 설정 화면
구글 태그 매니저(GTM) 데이터 영역 변수 2종 생성 완료 화면

Step 2: 트리거 만들기

방문자가 이미지 우클릭을 했을 때 태그가 작동하도록 발판을 만든다.

1. GTM 좌측 메뉴 [트리거] → [새로 만들기] 클릭

2. 트리거 유형: 맞춤 이벤트 선택

3. 이벤트 이름: image_right_click_attempt

4. 트리거 이름: Custom - 이미지 우클릭 시도 설정 후 저장

구글 태그 매니저 이미지 우클릭 추적 맞춤 이벤트 트리거 설정
GTM 맞춤 이벤트 트리거(image_right_click_attempt) 설정 화면

Step 3: GA4 태그(Tag) 만들기

최종적으로 GA4에 데이터를 전송하는 태그이다.

1. GTM 좌측 메뉴 [태그] → [새로 만들기] 클릭

2. 태그 유형: Google 애널리틱스 → Google 애널리틱스: GA4 이벤트 선택

3. 태그 세팅:

  • 측정 ID: 본인의 GA4 측정 ID (G-xxxxxxxxxx) 입력
  • 이벤트 이름: image_right_click (GA4 보고서에 찍힐 이름이다)
  • 이벤트 매개변수: 방문자가 어떤 이미지를 클릭했는지 받아온다. 파란색 매개변수 추가 버튼을 두 번 눌러서 행을 2개 만들어 준다.
    • 첫 번째 행 → 이벤트 매개변수 이름: img_url / 값: + 블록 아이콘을 눌러서 앞서 만든 dlv - target_img_url을 선택한다.
    • 두 번째 행 → 이벤트 매개변수 이름: img_alt / 값: + 블록 아이콘을 눌러서 앞서 만든 dlv - target_img_alt를 선택한다.

4. 트리거 항목: 방금 위에서 만든 Custom - 이미지 우클릭 시도 선택

5. 태그 이름: GA4 Event - Image Right Click 설정 후 저장

구글 태그 매니저 GA4 이벤트 태그 및 매개변수 설정 화면
GA4 이벤트 태그 생성 및 img_url, img_alt 매개변수 연결 화면


작동 테스트 및 완료

1. GTM 우측 상단 [미리보기]를 누른다.

2. 디버그 창이 뜨면 블로그 포스팅 중 아무 이미지에서 마우스 우클릭을 시도해본다.

3. 왼쪽 요약창에 image_right_click_attempt라는 이벤트가 정상적으로 찍힌다면 성공!

GTM 미리보기 디버그 모드 GA4 이미지 우클릭 태그 실행 성공 화면
GTM 미리보기(디버그 모드)에서 태그가 정상적으로 실행(Fired)된 성공 화면

이제 블로그 이미지 복사 추적을 위한 설정은 끝났다.


오늘의 한마디

누군가 내가 정성들여 만든 글이나 이미지를 아무렇지 않게 가져다가 쓰는 걸 봤다면 이런 말은 못 할 것이다. "넌 형사도 아니면서 왜 맨날 추적만 하냐!?"


Related Posts

댓글

댓글 쓰기