[GA4] GTM 티스토리 맞춤 이벤트 설정하기1(애드센스 클릭 이벤트)

안녕하세요.

저번 포스팅에서는 구글 태그 매니져(GTM)를 티스토리에 설치하고,

GA4(구글 애널리틱스)에 기본 연동하는 방법까지 알아보았습니다.

혹시 이 글을 처음 보시거나 아직 GTM 설치가 안되어 있다면 아래에 있는 전 포스팅을 참고해 주세요.

https://wonhwa.tistory.com/89

[GA4] 초보자를 위한 티스토리에 구글 태그 매니저(GTM)를 설치하는 방법

 

GTM과 GA4가 준비되었다면, 이제 본격적으로 활용을 해 볼 차례입니다.

 

0. 블로그 운영에 필요한 맞춤 이벤트

GA4는 페이지 조회수 같은 기본 데이터는 자동으로 수집하지만, 

블로그 방문자가 구체적으로 내 글 안에서 어떤 행동을 하는지 알기 위해서는 맞춤 이벤트 설정을 해야합니다.

블로그 운영에 도움이 되는 맞춤 이벤트는 아래의 2가지로 볼 수 있는데요,

1.  애드센스 광고 클릭 추적
2. 목차 클릭 추적

등이 있습니다. 앞으로  설정하는 방법을 차근차근 알아가 봅시다.

애드센스 광고 클릭 추적은 애드센스 승인을 받고 내 티스토리 블로그에 광고를 붙인 사람들에게 유용한 이벤트 이며,

목차 클릭 추적은 긴 글에서 독자가 원하는 정보를 파악하는데 도움이 되는 이벤트입니다.

오늘은 그 중에서도 1번 애드센스 광고 클릭 추적을 설정하는 방법을 같이 알아보겠습니다.

 

1. 구글 애드센스 광고 클릭 추적(내 블로그 수익 분석) 설정

어떤 글에서 구글 애드센스 광고 클릭이 많이 일어나는지 파악하는 것은 수익형 블로거에게 중요한 일입니다.

애드센스 광고 영역을 클릭했을 때 이를 추적하는 방법을 알아보겠습니다.

 

1. 클릭 관련 변수 활성화하기(최초 1회만)

1-1. GTM 사이트에 로그인하고 내 컨테이너 쪽으로 들어가기

https://tagmanager.google.com/#/home 

Google 애널리틱스

위 링크에 들어가 로그인을 하면, 아래처럼 내가 만든 계정 리스트가 나옵니다.

저번 시간에 만든 티스토리 계정을 클릭하여 태그 관리자 작업공간으로 들어갑니다.

1-1. 구글 태그 매니져 계정

1-2. GTM 좌측 메뉴 [변수]>[기본 제공 변수]의 [구성]을 클릭하기

1-2. GTM 변수 설정 > 구성

1-3.  클릭과 관련된 변수를 체크 표시하기

1-2 에서 클릭했을 때 나오는 우측 창에서 내용을 아래로 스크롤하여 사진과 같이 [클릭 수] 항목 아래의 모든 요소에 체크를 해 줍니다.

1-3. 기본 제공 변수 구성 클릭 관련 항목들

 

2. 트리거(조건) 만들기

애드센스 광고는 일반 텍스트 링크가 아닌 특별한 영역(iframe 등)으로 되어 있어 설정이 조금 다릅니다.

아래 단계별로 따라해 주세요.

2-1. 좌측 메뉴 [트리거] > [새로 만들기] 클릭

2-1. 트리거 생성하기

2-1. 트리거 구성 편집 버튼

이 후 나오는 창에서 [트리거 구성] 쪽에 마우스를 올리면 편집 버튼이 나오는데 아래와 같이 버튼을 눌러 주세요.

 

2-2. 트리거 유형:[클릭- 모든 요소] 선택하기

애드센스는 일반 링크가 아니라서 '모든 요소'를 선택해야 합니다.

2-2. 클릭- 모든 요소

2-3. 실행 조건:[일부 클릭] 선택하기

2-3. 실행 조건 설정

2-4. 조건 설정: [Click Classes], [포함], [adsbygoogle] 입력하기

구글 애드센스 코드는 기본적으로 'adsbygoogle'이라는 클래스 이름으로 감싸져 있기 때문에

이 영역을 클릭하는 것을 추적합니다.

아래처럼 순서대로 클릭하거나 작성하면 됩니다.

2-4. 조건 설정하기

2-5. 이름 지정 후 저장하기

트리거 설정 위쪽의 [이름 없는 트리거]를 [트리거-애드센스클릭] 또는 다른 원하는 이름으로 설정 후

우측의 [저장] 버튼을 눌러 저장해 줍니다.

2-5. 트리거 이름 설정 및 저장

 

3. 태그(실행) 만들기

3-0. [태그] > [기본 구성 태그] 선택 후 [태그 ID] 복사해 두기

태그 실행 설정 전에 미리 본인의 GA4 측정 ID(G-로 시작하는 코드)를 복사하여 준비해 놓습니다.

3-0. [태그] > [기본 구성 태그] 클릭

3-0. [태그 ID] 복사해두기

3-1. 좌측 메뉴 [태그] > [새로 만들기] 클릭하기

3-1. 태그 새로 만들기

이후 나오는 창에서 태그 구성 쪽에 마우스 올린 후 아래의 편집 버튼을 찾아 클릭해줍니다.

3-1. 태그 구성 편집 클릭

3-2. 태그 유형: [Google 애널리틱스: GA4 이벤트] 선택하기

3-2. 태그 유형: Google 애널리틱스

3-2. 태그 유형: GA4 이벤트

3-3. 측정ID: 3-0 에서 복사한 G-로 시작하는 코드를 붙여넣기

3-3. 측정 ID 입력

3-4. 이벤트 이름: [adsense_click] 또는 원하는 이름으로 저장하기

다만 원하는 다른 이름으로 지정 시에는 영문/언더바(_) 사용을 권장합니다.

3-4. 이벤트 이름 입력

3-5. 이벤트 매개 변수 추가하기 ★ ★ ★

어떤 글에서 광고를 클릭했는지 주소를 알아야 하므로 매개변수를 추가합니다.

• [이벤트 매개변수] 탭에서 [매개변수 추가] 클릭
• 이벤트 매개변수: [page_url] 입력
• 값: 오른쪽 레고 블록 모양 아이콘을 눌러 [Page URL] 선택  

3-5. 이벤트 매개변수 추가

3-6. [트리거] > [트리거-애드센스클릭]

아래로 스크롤을 하면 트리거 섹션이 나오는데요, 거기서 편집버튼 클릭 후 

아까 만들어둔 [트리거-애드센스클릭]을 클릭해 줍니다.

3-6. 트리거 섹션 > 편집

3-6. [트리거-애드센스클릭] 선택

3-7. 이름 지정 후 저장하기(예: GA4 Event-애드센스 클릭)

3-7. 이름 지정 후 저장

 

4. 제출 및 게시하기

이렇게 설정을 다 해놨으면 마지막으로 제출 및 게시를 하여야 최종적으로 저장이 됩니다.

4-1. [GTM 홈] > [제출] 클릭하기

3-7을 하고 나면 다시 홈 화면으로 돌아와져 있을 텐데, 거기서 우측 상단의 [제출] 버튼을 클릭합니다.

4-1. 제출 클릭

4-2. [변경사항 제출] > [게시] 클릭하기

제출을 클릭하면 아래와 같이 창이 뜰 텐데, 

거기서 간단하게 버전 정보랑 내용 입력 후 우측 상단의 [게시] 버튼을 눌러 줍니다.

4-2. 게시 클릭

최종 저장 완료

위처럼 "3 버전이 게시되었습니다." 라고 뜨면 저장이 잘 된 것입니다.

 

마무리

오늘은 맞춤 이벤트 - 구글애드센스 클릭 이벤트를 추가해 보았습니다.

'트리거', '태그', '매개변수' 등 여러 용어들이 나오고 낯설게 느껴질 수 있지만 계속 연습하다 보면 익숙해 질 것입니다.

원래는 목차 클릭 이벤트도 이번 글에 추가하려고 했는데,

글이 생각보다 길어져서 다음 포스팅에서 2편으로 목차 추가를 다뤄보도록 하겠습니다. 

다음 시간에 뵙겠습니다.