[블로그 프로젝트#8] GTM으로 블로그 내부 이동 추적하기

이전글: 

---

이벤트 정의

• internal_navigation
  • event property: nav_type, source
  • nav_type: post_direct, post_list
  • source: related_post, recent_post, popular_post, same_category_post, inline_link, category, calendar, tag

---

GTM 세팅

위 이벤트 정의를 참고하여 저 방식대로 추적되도록 GTM을 설치하자

순서

1. 티스토리 대상으로 하는법(맞춤형 자바스크립트)
2. 티스토리 대상으로 하는법(변수 생성x, 트리거 및 태그 생성을 많이하기)
3. 티스토리가 아닌 경우

티스토리와 티스토리가 아닌 경우를 분리하는 이유는, 티스토리가 아닌 경우처럼 하는 것이 더 깔끔하게 구글 애널리틱스를 설정할 수 있는 방법이므로 이와 같이 작성하였다. 하지만 이 방법이 티스토리에서는 잘 운용이 되지 않아 티스토리를 대상으로 설정하는 경우 1번과 2번을 추천한다.(이유가 티스토리 접속시 DOM 구조가 변경되어서, 라는 말이 있던데 정확한 원인은 모르겠다. 일단 현재로서는 3번으로 진행하면 티스토리의 경우 변수가 제대로 잡히지 않고 undefined로 뜨는 오류가 난다. 따라서 1번이나 2번으로 진행하는 것을 추천한다.

---

기본 구조 파악하기

아래 내용에서 Click Element 등 사용할 변수들과, 각 변수에 대해서 내용을 채워야하는 것이 있다. 이를 어떻게 파악하는지 먼저 알아보자.

 

첫번째 사진의 미리보기로 진입하면 두번째 사진과 세번째 사진이 각각의 창으로 뜬다. 이 상태에서 두번째 사진을 조작하면 세번째 사진의 왼쪽 '요약' 부분 아래에 있는 곳에 쭉 로그가 쌓인다.

 

여기서 내부이동이 일어날때 각 내용을 체크해봤다.

내가 체크해야하는 행위는: 글을 읽다가

1. 글 하단의 같은 카테고리 글 누르기(same_category_post)
2. 글 하단의 관련글 누르기 (related_post)
3. 글 하단 메뉴쪽에 있는 '최근글' 누르기(recent_post)
4. 글 하단 메뉴쪽에 있는 '인기글' 누르기(popular_post)
5. 글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 누르기(inline_link)
6. 글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 박스 누르기(inline_link)
7. 글 카테고리 제목 누르기(category)
8. 달력 제목의 '월' 클릭하기(calendar)
9. 달력 네모네모칸 클릭하기(calendar)
10. 태그 클릭하기(tag)

위 사항들을 확인해봤을때 대부분 Click Classes에는 아무것도 뜨지않고, Click Element를 통해 차이점을 확인할 수 있었다.

#Click Element 내용

글 하단의 같은 카테고리 글 누르기(same_category_post)
"https://yj-data.tistory.com/469: html > body.layout-aside-right.list" +
"-type-thumbnail.paging-number#tt-body-page > div#wrap > section#cont" +
"ainer > div.content-wrap > article#content > div.inner > div.entry-c" +
"ontent#article-view > div.another_category.another_category_color_gr" +
"ay > table > tbody > tr > th > a"

글 하단의 관련글 누르기 (related_post)
"https://yj-data.tistory.com/469?category=1273230: html > body.layout" +
"-aside-right.list-type-thumbnail.paging-number#tt-body-page > div#wr" +
"ap > section#container > div.content-wrap > article#content > div.in" +
"ner > div.related-articles > ul > li > a"

글 하단 메뉴쪽에 있는 '최근글' 누르기(recent_post)
"https://yj-data.tistory.com/484: html > body.layout-aside-right.list" +
"-type-thumbnail.paging-number#tt-body-page > div#wrap > section#cont" +
"ainer > div.content-wrap > aside.sidebar#aside > div.sidebar-2 > div" +
".post-list.tab-ui > div.tab-list#recent > ul > li > a"

글 하단 메뉴쪽에 있는 '인기글' 누르기(popular_post)
"https://yj-data.tistory.com/478: html > body.layout-aside-right.list" +
"-type-thumbnail.paging-number#tt-body-page > div#wrap > section#cont" +
"ainer > div.content-wrap > aside.sidebar#aside > div.sidebar-2 > div" +
".post-list.tab-ui > div.tab-list#popular > ul > li > a"

글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 누르기(inline_link)
"https://yj-data.tistory.com/469: html > body.layout-aside-right.list" +
"-type-thumbnail.paging-number#tt-body-page > div#wrap > section#cont" +
"ainer > div.content-wrap > article#content > div.inner > div.entry-c" +
"ontent#article-view > div.tt_article_useless_p_margin.contents_style" +
" > p > a"

글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 박스 누르기(inline_link)
"https://yj-data.tistory.com/469: html > body.layout-aside-right.list" +
"-type-thumbnail.paging-number#tt-body-page > div#wrap > section#cont" +
"ainer > div.content-wrap > article#content > div.inner > div.entry-c" +
"ontent#article-view > div.tt_article_useless_p_margin.contents_style" +
" > figure#og_1773108991464 > a"

글 카테고리 제목 누르기(category)
"https://yj-data.tistory.com/category/Project: html > body.layout-asi" +
"de-right.list-type-thumbnail.paging-number#tt-body-page > div#wrap >" +
" section#container > div.content-wrap > aside.sidebar#aside > div.si" +
"debar-1 > nav.category > ul.tt_category > li > ul.category_list > li" +
" > a.link_item"
#카테고리 제목은 Click Text에 표시(예, "Project")

달력 제목의 '월' 클릭하기(calendar)
"https://yj-data.tistory.com/archive/202603: html > body.layout-aside" +
"-right.list-type-thumbnail.paging-number#tt-body-page > div#wrap > s" +
"ection#container > div.content-wrap > aside.sidebar#aside > div.side" +
"bar-1 > div.calendar > table.tt-calendar > caption.cal_month > a"
#연월은 Click Text에 표시(예, "2026/03") or Click URL 뒤에 "https://yj-data.tistory.com/archive/202603"	에서 확인 가능.

달력 네모네모칸 클릭하기(calendar)
"https://yj-data.tistory.com/archive/20260303: html > body.layout-asi" +
"de-right.list-type-thumbnail.paging-number#tt-body-archive > div#wra" +
"p > section#container > div.content-wrap > aside.sidebar#aside > div" +
".sidebar-1 > div.calendar > table.tt-calendar > tbody > tr.cal_week." +
"cal_current_week > td.cal_day.cal_day3 > a.cal_click"
#연월일은 Click Text에는 없고 Click URL or Page URL에 "https://yj-data.tistory.com/archive/20260303" 형태로만 확인 가능. 또는 Page Path의 "/archive/202603"로도 확인 가능.

태그 클릭하기(tag)
"https://yj-data.tistory.com/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EA%BE%B8" +
"%EB%AF%B8%EA%B8%B0: html > body.layout-aside-right.list-type-thumbna" +
"il.paging-number#tt-body-archive > div#wrap > section#container > di" +
"v.content-wrap > aside.sidebar#aside > div.sidebar-2 > div.tags > a"
#태그 이름은 Click Text에 표시(예, "블로그꾸미기")

 

Click Element에 포함되는 요소 중 아래 내용을 각각 구분할 수 있는 부분은 다음과 같다.

1. 글 하단의 같은 카테고리 글 누르기(same_category_post) : another_category
2. 글 하단의 관련글 누르기 (related_post): related_articles
3. 글 하단 메뉴쪽에 있는 '최근글' 누르기(recent_post): tab-list#recent
4. 글 하단 메뉴쪽에 있는 '인기글' 누르기(popular_post): tab-list#popular
5. 글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 누르기(inline_link): entry-content#article-view
6. 글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 박스 누르기(inline_link): entry-content#article-view
7. 글 카테고리 제목 누르기(category): nav.category
8. 달력 제목의 '월' 클릭하기(calendar): table.tt-calendar
9. 달력 네모네모칸 클릭하기(calendar): table.tt-calendar
10. 태그 클릭하기(tag): div.tags

이 내용을 참고해서 아래 내용을 보면 된다.

---

1. 티스토리 대상으로 하는 법(맞춤형 자바 스크립트)

순서: 변수생성 > 트리거생성 > 태그 생성

 

변수 2개 생성하기

function() {
  var el = {{Click Element}};
  var url = {{Click URL}} || "";

  if (!el) return "unknown";

  if (url.indexOf("/category/") > -1) return "category";
  if (url.indexOf("/tag/") > -1) return "tag";
  if (url.indexOf("/archive/") > -1) return "calendar";

  if (el.closest && el.closest("#recent")) return "recent_post";
  if (el.closest && el.closest("#popular")) return "popular_post";
  if (el.closest && el.closest(".another_category")) return "same_category_post";
  if (el.closest && el.closest("#article-view")) return "inline_link";
  if (el.closest && el.closest(".related-articles")) return "related_post";


  return "unknown";
}

 

트리거 생성하기(4개)

 

태그 생성하기(1개)

 

되는지 확인하기(디버깅)

모든 수정을 마쳤다면, 우측 상단 '제출' 버튼을 눌러 게시하자. 그 뒤에 다시 미리보기를 눌러 창을 새로 로드한다. 그 안에서 정의된 행위를 하면 다음과 같이 확인할 수 있다. 아래 상황은 [블로그 프로젝트#3] 글을 누른 후 스크롤타고 내려가서 '같은 카테고리의 다른 글' 영역에서 [블로그 프로젝트#1] 글을 클릭한 상황이다. 따라서 var_nav_type은 post_direct, var_source는 same_category_post로 보이는 것을 확인하면 된다.

 

자바스크립트 코드는 GPT와 함께 작성했고, 원리는 상단에 설명한 Click Element 구하는 방법과 같다. 자바 스크립트 코드를 내가 온전히 쓴것도 아니고 나는 개발자도 아니기 때문에, 개발용 코드를 작성하지 않고 트리거와 태그를 다수 생성해 해결하는 방식으로도 추가로 GA연결을 진행해보겠다.

---

2. 티스토리 대상으로 하는법(변수 생성x, 트리거 및 태그 생성을 많이하기)

각 요소가 html 페이지에서 어디 위치에 있는 것인지 확인이 필요한 경우는 CSS Selector를 활용해서 찾고, url에서 바로 찾을 수 있는 요소는 url에서 찾는 방식이다.

CSS Selector를 찾는 방법은: 티스토리 > 관리 > 스킨편집에서 각 영역에 해당하는 부분을 찾으면 된다. 또는 개발자도구에서 확인해도 된다.

 

예를 들어, 최근글 영역을 보면

id="recent", 그리고 링크는 a에 들어가있다. 따라서 CSS Selector는 #recent a로 표기. class의 경우 .을 앞에 붙인다.

1. 글 하단의 같은 카테고리 글 누르기(same_category_post) : CSS Selector, .another_category a
2. 글 하단의 관련글 누르기 (related_post): CSS Selector, .related-articles a
3. 글 하단 메뉴쪽에 있는 '최근글' 누르기(recent_post): CSS Selector, #recent a
4. 글 하단 메뉴쪽에 있는 '인기글' 누르기(popular_post): CSS Selector, #popular a
5. 글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 누르기(inline_link): CSS Selector, .tt_article_useless_p_margin.contents_style a
6. 글 어디든 있는, '내 블로그의 다른글로 이동하는' 링크 박스 누르기(inline_link): CSS Selector, .tt_article_useless_p_margin.contents_style a
7. 글 카테고리 제목 누르기(category): Click URL, /category/
8. 달력 제목의 '월' 클릭하기(calendar): Click URL, /archive/
9. 달력 네모네모칸 클릭하기(calendar): Click URL, /archive/
10. 태그 클릭하기(tag): Click URL, /tag/

이렇게 총 8개(링크와 월은 합쳐짐)의 트리거를 만들면 됨. 

 

트리거 만들기(8개) 

CSS Selector 4개는 아래와 같이 만들면 된다: 같은 카테고리글, 관련글, 최근글, 인기글

 

인라인 링크는 조금 더해줄게 있어서 이렇게 하면 된다. 인라인 링크의 경우, ' .tt_article_useless_p_margin.contents_style a '로 하게되면 본문전체 안에 있는 링크를 모두 포함하게 된다. 그 경우, 외부로 향하는 링크까지 포함하게 되어, 내부로 향하는 링크만 포함시켜준다는 의미로 아래와 같이 작성했다. 

 

나머지 3개는 이렇게 하자: 카테고리, 달력, 태그.

 

트리거 8개 완성하면 이렇게 된다.

 

태그 만들기(8개)

태그는 위와 동일한 형식으로 8개를 만든다.

이름은 tag_internal_navigation_ 해당이름으로 작성하면 되고, 이벤트 이름은 internal_navigation으로 고정. 이벤트 매개변수의 경우, nav_type은  같은 카테고리글, 관련글, 최근글, 인기글, 인라인링크는 post_direct, 카테고리/태그/달력은 post_list. source는 지금껏 쓰던 이름으로 작성해주고, target_content는 {{Click URL}}로 고정. 트리거는 해당하는 트리거를 붙여주면 된다.

 

그리고 8종 모두 테스트 해보면 

이런식으로 태그가 제대로 되고, 변수도 체크되는 것을 확인할 수 있다.

---

3. 분석하는 대상이 티스토리가 아니라면 이 방법을 쓰자

 

변수 생성(2개)

상단에 Click Element 관련해 작성한 8가지를 모두 써주자.

 

트리거 생성(4개)

나머지 category, tag, calendar는 tag처럼 동일하게 생성. category는 /category/, calendar는 /archive/로만 변경.

 

태그 생성(1개)

트리거 4개 다 연결.

티스토리가 아니라면 1번 방법과 결과가 유사하게 도출 될 것이다.(추정이긴 함)

 

---

여기까지 세팅을 완료했으면, 이틀 후 쯤 데이터가 잘 쌓이고 있는지 여부를 확인해보자.