이전 글 ‘<a href="https://datarian.io/blog/gtm-click-text-click-url-page-path" target="_blank">간단한 GTM 클릭 트리거 만들기: Click Text, Click URL, Page Path</a>’에서는 클릭 요소의 텍스트, 클릭한 후 이동하는 URL, 클릭 당시 페이지 경로를 이용해 간단하게 클릭 요소를 식별하는 방법에 대해 알아보았습니다.이번 글에서는 GTM에서 클릭 이벤트를 만들 때 자주 사용되는 트리거 옵션 6개 중 나머지 3개(Click ID, Click Classes, Click Element)에 대해 알아보도록 하겠습니다.<ol><li>Click Text</li><li>Click URL</li><li>Page Path</li><li>Click ID</li><li>Click Classes</li><li>Click Element</li></ol><h1 id="22cf956ea42147c5af27cfa85b221040">웹사이트 구성 요소를 이용해 클릭 트리거 만들기</h1>실무에서 데이터를 쌓다 보면 클릭 요소 내의 텍스트만 가지고 정확하게 내가 원하는 버튼, 링크의 클릭 데이터를 설정하기 어려운 경우가 많습니다. 그래서 GTM에서는 Click Text 옵션의 한계점을 보완하고 조금 더 정확하게 트리거 조건을 설정할 수 있는 Click Element, Click Classes, Click ID라는 옵션을 제공합니다.그런데 이 세 가지 옵션을 잘 사용하기 위해서는 웹사이트 구성 요소인 <code>element</code> 그리고 <code>class</code>, <code>id</code>에 대한 이해가 조금 필요합니다.데이터리안 웹사이트 예시를 한 번 살펴보겠습니다. 데이터리안 웹사이트 메인 페이지에 노출되고 있는 슬라이드 배너가 어떤 코드로 요소로 구성되어 있는지 확인해 보았습니다 (윈도우는 F12, 맥은 Command + Option + I를 누르면 아래와 같이 개발자 도구를 띄울 수 있습니다).<figure data-type="image-block" data-src="https://attachments.datarian.io/production-c04f7216-a94a-4374-bce8-39a8857d6d0c-99tgB-ucDh4kPpA8H-zxyLSY4lhbBuzSRXIffOyjYdo.png" data-align="center" data-width="576" style="width: 576px; max-width: 100%"><img src="https://attachments.datarian.io/production-c04f7216-a94a-4374-bce8-39a8857d6d0c-99tgB-ucDh4kPpA8H-zxyLSY4lhbBuzSRXIffOyjYdo.png" width="576" /></figure>개발자 도구 왼쪽 상단에 있는 선택 도구를 클릭하고, 왼쪽 화면에 마우스를 가져다 대면 파란색으로 블럭이 생기는 것을 볼 수 있는데요.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-32bb2a41-9821-49a1-ba1a-f1aed51dd509-UaNWVTNI3nuVyuSwMwa22G2xUEBWQe0xEh6UeO-dgWw.png" data-align="center" data-width="384" style="width: 384px; max-width: 100%"><img src="https://attachments.datarian.io/production-32bb2a41-9821-49a1-ba1a-f1aed51dd509-UaNWVTNI3nuVyuSwMwa22G2xUEBWQe0xEh6UeO-dgWw.png" width="384" /></figure>이 상태로 우리가 알고 싶은 웹사이트 구성 요소를 클릭하면, 오른쪽에 해당 부분 코드가 어떻게 구성되어 있는지를 보여줍니다. 아래 스크린샷 이미지에서는 GA4 캠프 배너를 만들기 위해 필요한 코드가 오른쪽에 표시되고 있습니다. <figure data-type="image-block" data-src="https://attachments.datarian.io/production-7a036a67-a7b1-48d5-95c8-a8f21e0dcfef-fIl6KxLvJWuIenfflwuTQBONvGHa914VeV0iaKY4GQw.png" data-align="center" data-width="624" style="width: 624px; max-width: 100%"><img src="https://attachments.datarian.io/production-7a036a67-a7b1-48d5-95c8-a8f21e0dcfef-fIl6KxLvJWuIenfflwuTQBONvGHa914VeV0iaKY4GQw.png" width="624" /></figure>이 코드를 정리하면 아래와 같이 나타낼 수 있습니다.<pre><code class="language-html">-- 간소화 된 슬라이드 배너 코드 (실제 코드와 다를 수 있습니다)
&lt;div class=&quot;swiper&quot; ...&gt;
 &lt;div class=&quot;swiper-wrapper&quot; ...&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_seminar&quot; ...&gt;&lt;/div&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_SQL&quot; ...&gt;&lt;/div&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_GA4&quot; ...&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>여기서 <code>&lt;div&gt; ~ &lt;/div&gt;</code> 라고 쓰여진 것들은 HTML의 <code>element</code>이고, 그 안에 <code>class</code>, <code>id</code> 값이 들어있는 것을 볼 수 있어요.누군가 데이터리안 웹사이트에 접속해서 GA4 캠프 배너를 클릭한다면, 컴퓨터는 아래와 같이 이 요소의 element가 무엇인지, class 값이 무엇인지, id 값이 무엇인지를 알 수 있습니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-d7156a81-46a0-4238-b089-04c0deb41fd9-c65JekwWbFxDi_qEeS3Cg_tg6MVzAlCEUjDHyWvvGNU.png" data-align="center" data-width="480" data-show-caption="true" style="width: 480px; max-width: 100%"><img src="https://attachments.datarian.io/production-d7156a81-46a0-4238-b089-04c0deb41fd9-c65JekwWbFxDi_qEeS3Cg_tg6MVzAlCEUjDHyWvvGNU.png" width="480" /><figcaption>GA4 데이터 분석 캠프 배너 이미지 영역의 element, class, id 정보</figcaption></figure>GTM은 이 HTML의 id, class, element 값을 이용해서 사용자가 클릭한 요소를 구분하여 트리거를 만들 수 있도록 옵션을 제공하고 있는데요. 각 옵션의 특징들을 정리하면 아래와 같습니다.Click ID<ul><li>ID 속성을 기준으로 클릭 트리거를 설정할 수 있음.</li><li>한 HTML 페이지 내에서 ID는 유일한 값이어야 함. 다른 요소와 중복된 값을 가질 수 없음.</li></ul>Click Classes<ul><li>Class 속성을 기준으로 클릭 트리거를 설정할 수 있음.</li><li>한 HTML 페이지 내에 같은 Class 값을 가지는 요소가 여러 개 있을 수 있으며, 같은 Class 값을 가진 요소가 여러 개 있는 경우 어떤 요소를 클릭하든 동일하게 트리거가 작동.</li></ul>Click Element<ul><li>HTML element, CSS selector 를 이용하여 비교적 자유롭게 트리거를 설정할 수 있음.</li><li>Class, ID 값이 없는 HTML element를 클릭하는 경우에도 트리거 설정 가능.</li></ul>그럼 이제 각 옵션들을 어떻게 활용할 수 있는지 데이터리안 웹사이트 예시를 통해 설명해 보도록 하겠습니다.<h2 id="223aeb5dc3b04998a4dfe5d509e9d0b8">1. Click ID : 유일한 ID 값을 가진 요소 찾기</h2>먼저 데이터리안 웹사이트 홈 화면에 있는 슬라이드 배너 중 GA4 데이터 분석 캠프 배너를 클릭할 때만 동작하는 트리거를 만들어보겠습니다. 앞서 간소화 해둔 슬라이드 배너 코드를 다시 가져와서 살펴볼게요.<pre><code class="language-html">-- 간소화 된 슬라이드 배너 코드 (실제 코드와는 조금 다를 수 있습니다)
&lt;div class=&quot;swiper&quot; ...&gt;
 &lt;div class=&quot;swiper-wrapper&quot; ...&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_seminar&quot; ...&gt;&lt;/div&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_SQL&quot; ...&gt;&lt;/div&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_GA4&quot; ...&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>데이터리안 웹사이트 홈 화면 배너의 경우 해당 배너를 개발할 당시 각 배너 콘텐츠를 구분할 수 있는 유일한 값인 ID 를 설정해 주었습니다. 덕분에 이 ID 값을 이용하면 쉽게 사용자가 클릭한 배너가 어떤 콘텐츠를 담고 있는 배너인지 알 수 있습니다.<ul><li><code>main_banner_click_seminar</code>: 세미나 배너</li><li><code>main_banner_click_SQL</code>: SQL 캠프 배너</li><li><code>main_banner_click_GA4</code>: GA4 캠프 배너</li></ul>이렇게 ID 값으로 클릭 요소를 구분할 수 있는 경우 아래와 같이 Click ID 조건만 설정해 주면 간단히 트리거를 설정할 수 있습니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-99338835-71a7-4c6e-9fc3-2a6554bbbce8-C7eyNrb-bAsBCEAXGC3rIleINQLQ1jaM1uHz_PXCgH0.png" data-align="center" data-width="528" data-show-caption="true" style="width: 528px; max-width: 100%"><img src="https://attachments.datarian.io/production-99338835-71a7-4c6e-9fc3-2a6554bbbce8-C7eyNrb-bAsBCEAXGC3rIleINQLQ1jaM1uHz_PXCgH0.png" width="528" /><figcaption>Click ID로 트리거 조건 만들기</figcaption></figure><h3 id="c3ee9335fc9e438d8894818b26dc71b9">🚨 Click ID, Click Classes, Click Element를 사용할 때 주의할 점</h3>Click ID, Click Classes, Click Element 모두 클릭한 요소의 가장 마지막에 있는 element가 가진 값을 기준으로 조건을 설정합니다.만약, 웹사이트 구조가 아래와 같이 변경되었다면, 가장 마지막에 위치한 Element는 &lt;div&gt;가 아니라 &lt;a&gt; 이므로 &lt;div&gt; element에 포함된 class, id 값을 사용하여 트리거를 세팅할 수 없습니다. 조건을 세팅하기 전 마지막 HTML 요소가 무엇인지 한번 더 확인해 주세요.<pre><code class="language-html">-- 간소화된 슬라이드 배너 코드 (실제 코드와는 조금 다를 수 있습니다)
&lt;div class=&quot;swiper&quot; ...&gt;
 &lt;div class=&quot;swiper-wrapper&quot; ...&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_GA4&quot; ...&gt;
 &lt;a href=&quot;https://www....&quot;&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre><h2 id="c2edf6d8598448f4aa848218ebac307a">2. Click Classes : 동일한 Class 값을 가진 요소들 찾기</h2><figure data-type="image-block" data-src="https://attachments.datarian.io/production-8f92daba-c8c8-43e0-934a-6a4826fd2d7a-yJFwR_X9sayx3kExgtWxhEwm-5xZvV5foNmRAwbg-Zw.gif" data-align="center" data-width="384" data-height="240" data-show-caption="true" style="width: 384px; max-width: 100%"><img src="https://attachments.datarian.io/production-8f92daba-c8c8-43e0-934a-6a4826fd2d7a-yJFwR_X9sayx3kExgtWxhEwm-5xZvV5foNmRAwbg-Zw.gif" width="384" height="240" /><figcaption>홈 화면 슬라이드 배너</figcaption></figure>이번에는 Class 속성의 값을 이용해서 슬라이드 배너 안의 여러 광고 이미지 중 하나라도 클릭할 때 동작하는 트리거 만들어보겠습니다. GA4 캠프 배너를 클릭했는지를 알 필요는 없고, 슬라이드 배너 중 하나라도 클릭하는지 궁금한 경우 이렇게 트리거를 설정해 볼 수 있는데요.아래 코드에서 <code>class</code> 값이 <code>swiper-slide</code>인 경우에 트리거를 실행시키도록 설정해 주면 됩니다.<pre><code class="language-html">-- 간소화된 슬라이드 배너 코드 (실제 코드와는 조금 다를 수 있습니다)
&lt;div class=&quot;swiper&quot; ...&gt;
 &lt;div class=&quot;swiper-wrapper&quot; ...&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_seminar&quot; ...&gt;&lt;/div&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_SQL&quot; ...&gt;&lt;/div&gt;
 &lt;div class=&quot;swiper-slide&quot; id=&quot;main_banner_click_GA4&quot; ...&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre><figure data-type="image-block" data-src="https://attachments.datarian.io/production-bae91a5e-0677-47b6-9840-29d23c8d9f18-VSVUoJw5sVyBnf1OpBvnfT32GvDCtmgSvRNNAdouDyU.png" data-align="center" data-width="528" data-show-caption="true" style="width: 528px; max-width: 100%"><img src="https://attachments.datarian.io/production-bae91a5e-0677-47b6-9840-29d23c8d9f18-VSVUoJw5sVyBnf1OpBvnfT32GvDCtmgSvRNNAdouDyU.png" width="528" /><figcaption>Click Classes로 트리거 실행 조건 만들기</figcaption></figure><h2 id="def4facb7fc64fe880ec99b48731fd9c">Click Element : HTML Element를 이용해 클릭 요소 찾기</h2>이번에는 HTML Element를 이용해 웹사이트 헤더를 클릭할 때 동작하는 트리거를 만들어보겠습니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-c5ef4dd6-0b06-4898-a198-50e2c227b47b-Z109RKRUNzyDzMrNoGFKVVT_XVNYz1hWCpa2iu8Ggts.png" data-align="center" data-width="432" style="width: 432px; max-width: 100%"><img src="https://attachments.datarian.io/production-c5ef4dd6-0b06-4898-a198-50e2c227b47b-Z109RKRUNzyDzMrNoGFKVVT_XVNYz1hWCpa2iu8Ggts.png" width="432" /></figure>슬라이드 배너 코드를 확인했을 때와 마찬가지로 개발자 도구를 열어 코드를 확인해 줍니다 (윈도우는 F12, 맥은 Command + Option + I를 누르면 아래와 같이 개발자 도구를 띄울 수 있습니다).<figure data-type="image-block" data-src="https://attachments.datarian.io/production-36742ae8-d9f0-4956-9c98-ece24ea78d8e-NBDRsjHTpsuIHSnKed1_sUbmtam09xlXtaxQrxlb04E.png" data-align="center" data-width="672" style="width: 672px; max-width: 100%"><img src="https://attachments.datarian.io/production-36742ae8-d9f0-4956-9c98-ece24ea78d8e-NBDRsjHTpsuIHSnKed1_sUbmtam09xlXtaxQrxlb04E.png" width="672" /></figure>위 코드를 간소화 해보면 아래와 같이 나타낼 수 있습니다.<pre><code class="language-html">-- 간소화된 헤더 메뉴 탭 코드 (실제 코드와는 조금 다를 수 있습니다)
&lt;header&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;a&gt;세미나&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a&gt;강의 목록&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a&gt;블로그&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/header&gt;</code></pre>위와 같은 구조의 HTML element 를 클릭할 때 트리거가 실행되도록 설정해 주고 싶다면 아래와 같이 조건을 작성해 주면 됩니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-62150fb0-ba9a-4283-aaf9-249dbc4b51e9-hetGSNCM-V6l0szMUG48fvoqCeZBNOdyPA8gUt0ZsiE.png" data-align="center" data-width="528" style="width: 528px; max-width: 100%"><img src="https://attachments.datarian.io/production-62150fb0-ba9a-4283-aaf9-249dbc4b51e9-hetGSNCM-V6l0szMUG48fvoqCeZBNOdyPA8gUt0ZsiE.png" width="528" /></figure>이때 클릭되는 버튼의 태그(이 경우 a 태그)가 반드시 마지막에 위치해야 하며, 부모 태그들의 순서가 임의로 변경되면 안 됩니다.header div div div ul li a단, 특정 요소의 위치를 구분하는 데에 큰 문제가 없는 경우 중간 태그들을 생략해도 동일하게 트리거가 실행됩니다. header div div div ul li a→ header div ul li a (div 생략)→ header div li a (div, ul 생략)<h1 id="e520fdb8d6004f8a8751da2a02bcdadb">잘 설정한 것 같은데 여전히 트리거가 실행되지 않는다면,</h1>지금까지 클릭요소를 식별하기 위해 가장 많이 사용하는 방법 6가지(Click Text, Click URL, Page Path, Click ID, Click Classes, Click Element)에 대해 이야기해 보았습니다. 이제 GTM으로 클릭 태그를 설정하는 것이 마냥 두렵지는 않으실 것 같은데요. 그래도 실무에서 이 내용들을 적용하려고 보면 내 맘처럼 잘 동작하지 않는 경우가 많이 있을 거예요.그런 분들을 위해 다음 글에서는 태그 설정을 알맞게 한 것 같은데 제대로 데이터 수집이 안될 때 왜 안되는지를 확인할 수 있는 디버깅 방법에 대해 알아보도록 하겠습니다.

특정 버튼을 클릭했는지 따로 확인하고 싶다면 설정이 필요합니다.

GA4 버튼 클릭 데이터 수집하기

GTM에서 버튼 클릭 데이터를 조금 더 정확히 수집해봅시다

간단한 GTM 클릭 트리거 만들기: Click Text, Click URL, Page Path

GTM을 이용해 배너 클릭 이벤트까지 직접 세팅해 봅시다

완벽한 GTM 클릭 트리거 만들기: Click ID, Click Classes, Click Element

웹사이트 구성 요소를 이용해 클릭 트리거 만들기

잘 설정한 것 같은데 여전히 트리거가 실행되지 않는다면,

완벽한 GTM 클릭 트리거 만들기: Click ID, Click Classes, Click Element

GA4, 필요할 때마다 검색해서 써왔다면?

Contents

데이터 분석 소식을
매월 받아보세요

🖱️ GA4 클릭 데이터 제대로 수집해보고 싶어요

함께 읽어보면 좋은 글

노션 + oopy로 5분 만에 나만의 웹사이트 만들기

GA4, SQL 데이터 분석 캠프 중에 나한테 맞는 과정은 무엇일까?

GA4에서 기여 분석 시작하기

데이터 분석 소식을
매월 받아보세요데이터 분석 소식을 받아보세요

완벽한 GTM 클릭 트리거 만들기: Click ID, Click Classes, Click Element

GA4, 필요할 때마다 검색해서 써왔다면?

Contents

데이터 분석 소식을 매월 받아보세요

🖱️ GA4 클릭 데이터 제대로 수집해보고 싶어요

함께 읽어보면 좋은 글

노션 + oopy로 5분 만에 나만의 웹사이트 만들기

GA4, SQL 데이터 분석 캠프 중에 나한테 맞는 과정은 무엇일까?

GA4에서 기여 분석 시작하기

데이터 분석 소식을 매월 받아보세요데이터 분석 소식을 받아보세요

데이터 분석 소식을
매월 받아보세요

데이터 분석 소식을
매월 받아보세요데이터 분석 소식을 받아보세요