본문 바로가기

Data Literacy/Google Analytics

4. GA4 이벤트 생성(2) - 인터랙션 이벤트 설정 5 : 트리거 설정 [2/2]

GA4 logo image

 

 

앞선 아티클에서 우리는 하트 버튼(좋아요) 클릭 이벤트를 생성하여 GA로 집계될 수 있도록 설정하는 전체적인 과정을 겪었습니다. 이제, 이를 응용하여 새로운 이벤트를 처음부터 생성해 보고 추가로 conditions을 설정하는 케이스에 대해서도 살펴보겠습니다. 

 

 

4. GA4 이벤트 생성(2) - 인터랙션 이벤트 설정 5 : 트리거 설정 [1/2]

앞선 아티클에서 우리는 태그(명령어)를 설정했습니다. 이제, 이 과정을 통해서 트리거를 설정해야 하는 단계가 되었습니다. 트리거를 설정하면서 동시에 변수(적용 대상)를 지정하게 되니, 자

nozeroslope.tistory.com

 

 

 


 

 

○ '공유하기' 버튼 클릭 이벤트 설정하기

 

이번에는 하트 버튼(좋아요) 버튼과 함께 위치하는 공유하기 버튼 클릭하기 이벤트를 GTM을 이용해서 새롭게 생성하는 프로세스를 따라서 진행해 보겠습니다. 앞선 아티클에서 진행했던 방식과 유사하므로, 최대한 직접 진행해 보세요.

 

1. 우선 [태그] 메뉴에서 [새로 만들기]를 클릭해 새로운 태그를 생성합니다. 

2. 태그 이름은 "GA4_이벤트_공유하기 버튼 클릭"으로 설정하고, 태그 유형은 [Google 애널리틱스: GA4 이벤트]를 선택합니다. 

 

 

 

3. 이벤트 이름과 유형을 선택해주고, 이제 트리거를 설정 시작합니다. 

 

 

 

4. "공유버튼 클릭 트리거"라는 이름으로 트리거를 설정합니다. 역시 해당 페이지에서 '공유하기'버튼 클래스를 확인하고, 이 중 주요 단어인 ico_share를 포함하는 클래스를 클릭하는 것을 트리거로 설정합니다. 

 

 

5. 모든 설정이 완료되면, 이벤트를 저장합니다. 

 

 

 

6. 해당 버전을 라이브에 릴리즈 합니다. 

 

 

7. Debug View에서 클릭 이벤트 발생 여부를 확인합니다. 

 

 

 

 

 


 

 

○ 이벤트 트리거 - OR 조건 설정하기

 

참고로 우리가 하트 클릭 이벤트를 설정할 때 놓친 부분이 있습니다. 바로 하트 아이콘 클릭 외에 옆에 붙어있는 '공감'이라는 글자를 클릭하는 부분을 빼놓은 것입니다. 우리가 트리거로 등록한 하트 클릭 이벤트는 아이콘 이미지 클릭만을 트리거로 등록해 두었으므로, '공감'이라는 텍스트 영역을 클릭했을 때도 click_btn_heart 이벤트가 전송되도록 OR 조건을 추가해야 합니다. 

 

티스토리 블로그에서 확인해 보면, 해당 '공감' 텍스트 영역의 class는 txt_like uoc-count로 확인됩니다. 이를 트리거 조건에 추가해 보도록 하겠습니다. 

 

우선 해당 이벤트로 진입해, [트리거] 영역에서 "+" 버튼을 클릭합니다.

 

그리고 새롭게 독립된 트리거 하나를 추가합니다. 여기서는 "하트버튼 텍스트 클릭 트리거"라고 이름을 붙였고, 클릭 트리거는 클래스 명에 "txt_like"가 포함될 경우로 생성했습니다. 

 

 

이렇게 해당 이벤트에 대한 트리거는 하트 버튼 "또는" 하트 버튼 텍스트를 클릭하는 것으로 설정되었습니다. 이 역시, 라이브에 배포한 다음 디버그 뷰를 통해서 살펴보겠습니다.

 

 

 

 

○ 이벤트 트리거 - AND 조건 설정하기

 

위에서 OR 트리거 조건을 살펴보았으면, 당연히 AND 조건에 대해서도 살펴볼 필요성이 있을 것입니다. AND와 OR 조건이 딱히 명시적으로 구분되지 않기 때문에, 주의하셔야 합니다. 다음과 같이 기억해 두세요.

 

* OR 조건 적용 : 두 개의 독립적인 트리거를 만들고, 하나의 이벤트에 각각의 트리거를 추가한다.
* AND 조건 적용 : 하나의 트리거에서 조건을 설정한다.

 

간단하지만, 생각보다 헷갈릴 수 있는 부분이니 주의해 주세요. 어쨌든 AND 조건 실습을 위해서 다음과 같은 상황을 가정하겠습니다.

 

"특정 게시글 하나에서만 좋아요 버튼이 클릭될 때 이벤트가 발생한다." 

 

일단 이것은 아래와 같은 방식으로 지정할 수 있습니다. Page URL 조건을 삽입하고, 정확한 해당 페이지의 URL을 입력하는 방식입니다. 

 

또는, 아래와 같이 Page Path에서 정확한 하위 URL을 입력하는 방식입니다. 이 역시도 '같음'으로 설정합니다. 

 

 

위 AND 조건은 별도로 저장해서 배포는 하지 않겠습니다.