Microsoft MVP성태의 닷넷 이야기
글쓴 사람
홈페이지
첨부 파일
 

Google Analytics - gtag 함수를 이용해 페이지 URL 수정 및 별도의 이벤트 생성 방법

예를 들어, 제 웹 사이트의 경우 글을 읽는 방식이 다음과 같이 2가지로 나뉩니다.

[query 문자열을 이용한 방식]
/default.aspx?mode=2&sub=0&wid=150

[url 경로를 이용한 방식]
/2/0/150

그래서, Google Analytics에서 제공하는 "Global Site Tag (gtag.js)"의 기본 "Tracking Code" 스크립트를 이용하면,

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1264369-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-1264369-1');
</script>

다음과 같이 중구난방으로 유입 URL이 들어옵니다.

gtag_path_location_1.png

그러니까, 제 경우에는 "url 경로 방식"으로 깔끔하게 유입 URL이 보이기를 바라는 것인데요, 다행히 GA 스크립트 측에서 이에 대한 방법을 제공하고 있습니다.

Measure pageviews
; https://developers.google.com/analytics/devguides/collection/gtagjs/pages

gtag('config', 'GA_MEASUREMENT_ID', {<pageview_parameters>});

지원되는 pageview_parameters로는 page_title, page_location, page_path가 있는데 이 중에서 page_path는 Host 이름을 제외한 경로, page_location은 Host 이름까지 포함한 경로인데 제 경우에는 다음과 같은 식으로 설정했습니다.

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-1264369-1', {
        'page_location': 'https://www.sysnet.pe.kr/2/0/150'
    });
</script>

(물론, page_location의 값을 저런 식으로 하드 코딩해서는 안 되고 서버 측 스크립트에서 채워지도록 해야 할 것입니다.)

이렇게 설정한 후, Google Analytics에서 보이는 경로가 이제 다음과 같이 깔끔하게 바뀝니다.

gtag_path_location_2.png

참고로, page_location과 page_path의 값은 아무거나 하나만 설정해 주면 될 것입니다. 그리고 page_title은 HTML <title />에 설정하지 않은 값으로 채우고 싶을 때 선택적으로 설정하면 됩니다. 왜냐하면, Google Analytics는 기본적으로 HTML 페이지의 title 값을 수집해 다음과 같이 "Page Title"이 있는 페이지에서 보여주기 때문입니다.

gtag_path_location_3.png




사실 제 홈페이지가 전자 상거래의 성격은 아니어서 그다지 관심있는 지표가 없습니다. 그런데, 가끔 궁금했던 것이 각각의 글에 첨부한 예제 코드를 사용자들이 정말 다운로드를 할까?... 하는 점입니다.

물론, 첨부 파일을 다운로드하는 aspx 페이지에 서버 측 코드를 추가해 실행될 때마다 DB와 연동시켜 다운로드 횟수를 기록하면 될 텐데... 음... 이게 또 은근히 귀찮아서요. ^^; 어차피 제 웹 사이트에 크게 중요한 데이터도 아니어서 그냥 GA에 측에 맡기는 것이 더 좋을 것 같다는 판단이 듭니다.

GA도 이런 식의 요구 사항을 위해 gtag에 'event' 명령어를 제공하는데,

Measure Google Analytics Events
; https://developers.google.com/analytics/devguides/collection/gtagjs/events

gtag.js Parameter reference
; https://developers.google.com/gtagjs/reference/parameter

기본적으로 event 명령에는 action, event_category, event_label, value 속성들을 추가적으로 제공할 수 있습니다. 제 경우에는 많은 정보가 필요하지 않으므로 value를 빼고 다음과 같이 gtag 함수를 구성하고,

function gaDownloadEvent(category, downloadLink) {
    try {
        gtag('event', 'Download', {
            'event_category': category,
            'event_label': downloadLink,
        });
    } catch { }

    return true;
}

파일 다운로드를 하는 a 태그의 onclick에 연결했습니다.

<a onclick='return gaDownloadEvent("a_down", "331301885/12122")' href='https://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=1536&amp;boardid=331301885'>[unref_param_sample.zip]</a>

그럼 다음과 같은 정도로 GA에서 확인할 수 있습니다.

gtag_path_location_4.png

재미있는 것은, Google Analytics가 개발자라기보다는 마케터들을 위한 도구이기 때문에 저런 식으로 코딩이 아닌 GA 측의 설정으로 '이벤트'를 처리하는 방법도 제공한다는 점입니다.

How To Track Downloads In Google Analytics - Complete Guide
; https://www.jeffalytics.com/track-downloads-google-analytics/

이름하여 Google Tag Manager인데, 아무래도 기능을 제공하는 것이다 보니 "Start for free"라는 문구로 봐서는 어느 정도 선을 넘어가게 되면 비용을 부담하는 방식인 것 같습니다. 장점이라면 마케터로 하여금 Tag Manager 설정 창을 이용해 일정한 규칙을 입력하는 방식으로 처리할 수는 있는데, 어쨌든 이벤트를 추적할 웹 페이지에 스크립트를 추가해야 한다는 점은 변함이 없습니다. 게다가 다음과 같은 식으로 2개를 넣어야 합니다.

<!-- head 태그 안에 추가 -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KRJG5WQ');</script>
<!-- End Google Tag Manager -->

<!-- body 태그 안에 추가 -->
<!-- Google Tag Manager (noscript) -->
<noscript> &lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KRJG5WQ"
height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>
<!-- End Google Tag Manager (noscript) -->

보니까... 좀 지저분하죠? ^^ 따라서 개발자 입장에서는 저런 식으로 이벤트마다 스크립트를 덕지덕지 바른다는 것은 미관상 좋지 않을 것이므로 할 수 있다면 그냥 gtag를 이용해 처리하는 것이 더 좋을 듯합니다.




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]





[최초 등록일: ]
[최종 수정일: 1/23/2020 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer@outlook.com

비밀번호

댓글 쓴 사람
 




1  2  3  4  5  6  [7]  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
12070정성태12/9/2019931오류 유형: 581. resize2fs: Bad magic number in super-block while trying to open /dev/.../root
12069정성태12/19/2019759디버깅 기술: 139. windbg - x64 덤프 분석 시 메서드의 인자 또는 로컬 변수의 값을 확인하는 방법
12068정성태11/28/20191144디버깅 기술: 138. windbg와 Win32 API로 알아보는 Windows Heap 정보 분석 [2]파일 다운로드2
12067정성태11/27/2019744디버깅 기술: 137. 실제 사례를 통해 Debug Diagnostics 도구가 생성한 닷넷 웹 응용 프로그램의 성능 장애 보고서 설명 [1]파일 다운로드1
12066정성태11/27/2019535디버깅 기술: 136. windbg - C# PInvoke 호출 시 마샬링을 담당하는 함수 분석 - OracleCommand.ExecuteReader에서 OpsSql.Prepare2 PInvoke 호출 분석
12065정성태11/25/2019656디버깅 기술: 135. windbg - C# PInvoke 호출 시 마샬링을 담당하는 함수 분석파일 다운로드1
12064정성태11/25/2019909오류 유형: 580. HTTP Error 500.0/500.33 - ANCM In-Process Handler Load Failure
12063정성태11/21/2019687디버깅 기술: 134. windbg - RtlReportCriticalFailure로부터 parameters 정보 찾는 방법
12062정성태12/20/2019563디버깅 기술: 133. windbg - CoTaskMemFree/FreeCoTaskMem에서 발생한 덤프 분석 사례 - 두 번째 이야기
12061정성태11/20/2019629Windows: 165. CoTaskMemAlloc/CoTaskMemFree과 윈도우 Heap의 관계
12060정성태11/21/2019686디버깅 기술: 132. windbg/Visual Studio - HeapFree x64의 동작 분석
12059정성태11/20/2019652디버깅 기술: 131. windbg/Visual Studio - HeapFree x86의 동작 분석
12058정성태11/19/2019637디버깅 기술: 130. windbg - CoTaskMemFree/FreeCoTaskMem에서 발생한 덤프 분석 사례
12057정성태11/18/2019460오류 유형: 579. Visual Studio - Memory 창에서 유효한 주소 영역임에도 "Unable to evaluate the expression." 오류 출력
12056정성태11/18/2019820개발 환경 구성: 464. "Microsoft Visual Studio Installer Projects" 프로젝트로 EXE 서명 및 MSI 파일 서명 방법파일 다운로드1
12055정성태11/17/2019419개발 환경 구성: 463. Visual Studio의 Ctrl + Alt + M, 1 (Memory 1) 등의 단축키가 동작하지 않는 경우
12054정성태11/15/2019850.NET Framework: 869. C# - 일부러 GC Heap을 깨뜨려 GC 수행 시 비정상 종료시키는 예제
12053정성태11/15/2019510Windows: 164. 윈도우 10 - 명령행 창(cmd.exe) 속성에 (DotumChe, GulimChe, GungsuhChe 등의) 한글 폰트가 없는 경우
12052정성태11/15/2019446오류 유형: 578. Azure - 일정(schedule)에 등록한 runbook이 1년 후 실행이 안 되는 문제(Reason - The key used is expired.)
12051정성태12/2/2019984개발 환경 구성: 462. 시작하자마자 비정상 종료하는 프로세스의 메모리 덤프 - procdump [1]
12050정성태11/14/2019663Windows: 163. AcLayers의 API 후킹과 FaultTolerantHeap
12049정성태11/13/2019507.NET Framework: 868. (닷넷 프로세스를 대상으로) 디버거 방식이 아닌 CLR Profiler를 이용해 procdump.exe 기능 구현
12048정성태11/12/2019693Windows: 163. GUID 이름의 볼륨에 해당하는 파티션을 찾는 방법
12047정성태11/12/20191107Windows: 163. 안전하게 eject시킨 USB 장치를 물리적인 재연결 없이 다시 인식시키는 방법
12046정성태11/9/2019616오류 유형: 577. windbg - The call to LoadLibrary(...\sos.dll) failed, Win32 error 0n193
12045정성태10/27/2019513오류 유형: 576. mstest.exe 실행 시 "Visual Studio Enterprise is required to execute the test." 오류 - 두 번째 이야기
1  2  3  4  5  6  [7]  8  9  10  11  12  13  14  15  ...