Integrating Google Tag Manager with Google Analytics 토론을 이어갑니다:
Google Tag Manager 및 Analytics로 커스텀 이벤트 보내기
이 가이드는 Discourse 사이트에서 Google Tag Manager(GTM) 및 Google Analytics로 커스텀 이벤트를 보내도록 구성하는 방법을 설명하며, 이를 통해 특정 사용자 상호작용을 추적할 수 있습니다.
필요한 사용자 권한: 관리자
사전 요구 사항
커스텀 이벤트를 구현하기 전에 다음 사항을 확인하세요:
- Setup Google Tag Manager for Analytics 가이드를 따라 Discourse 사이트에 Google Tag Manager를 설정했는지 확인합니다.
- 사이트의
gtm container id설정에 GTM 컨테이너 ID를 추가했는지 확인합니다. - Google 스크립트를 허용하도록 사이트의
content security policy script src설정을 업데이트했는지 확인합니다.
커스텀 이벤트 추가
테마 컴포넌트 생성
- Admin > Customize > Components로 이동합니다.
- "New"를 클릭하고 "Create new component"를 선택합니다.
- 컴포넌트에 이름을 부여합니다.
- JS 탭을 선택하고 코드를 추가합니다. 예를 들어, 아래 코드는 appEvent 트리거를 가져와 다음 이벤트를 dataLayer에 푸시합니다:
post:likedpost:createdtopic:created
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
window.dataLayer = window.dataLayer || [];
// Track post likes
api.onAppEvent("page:like-toggled", (post, likeAction) => {
let topic = post.topic;
if (post && topic && likeAction && likeAction.acted) {
window.dataLayer.push({
'event': 'postLiked',
'postId': post.id
});
}
});
// Track new posts
api.onAppEvent("post:created", post => {
if (post) {
window.dataLayer.push({
'event': 'postCreated',
'postId': post.id
});
}
});
// Track new topics
api.onAppEvent("topic:created", (post, composerModel) => {
if (post) {
window.dataLayer.push({
'event': 'topicCreated',
'topicCategory': composerModel.get("category.name"),
'topicId': post.topic_id
});
}
});
});
- 컴포넌트를 저장합니다.
- 해당 컴포넌트를 사이트의 모든 활성 테마에 추가합니다.
사용 가능한 이벤트
사용 가능한 모든 트리거 이벤트는 여기에 나열되어 있습니다: AppEvents triggers reference
GTM 구성
트리거 생성
- https://tagmanager.google.com/으로 이동합니다.
- 사이드 메뉴에서 "Triggers"를 선택합니다.
- "New"를 클릭합니다.
- 트리거에 이름을 부여합니다.
- 트리거 유형으로 "Custom Event"를 선택합니다.
- 이벤트 이름을 입력합니다 (예:
postCreated). - 트리거가 "All Custom Events"에서 발화되도록 설정합니다.
Data Layer 변수 생성
- GTM 사이드 메뉴에서 "Variables"를 선택합니다.
- User-Defined Variables 섹션에서 "New"를 클릭합니다.
- 변수에 이름을 부여합니다.
- 변수 유형으로 "Data Layer Variable"을 선택합니다.
- data layer 변수 이름을 입력합니다 (예:
postCreated). - Data Layer Version을 "Version 2"로 설정합니다.
이벤트 추적을 위한 Google Tag 생성
2024년 기준, 권장되는 방법은 구형 “Google Analytics: GA4 Event” 태그 유형 대신 새로운 “Google Tag” 템플릿을 사용하는 것입니다. Google Tag는 GA4와의 통합이 더 뛰어나며 Consent Mode v2에 대한 내장 지원을 제공합니다.
- GTM 사이드 메뉴에서 "Tags"를 선택합니다.
- "New"를 클릭합니다.
- 태그에 이름을 부여합니다 (예: “GT - Post Created”).
- Tag Configuration 아래에서:
- "Google Tag"를 선택합니다.
- GA4 구성을 선택합니다 (이것이 첫 번째 태그라면 새로 생성합니다).
- "Event Name"에는 GA4 네이밍 규칙을 따르는 기술적인 이름을 입력합니다 (예:
post_created). - “Configuration settings” 아래에서 "Add Row"를 클릭하여 data layer 변수를 포함합니다:
- Configuration Parameter: (예:
postId) - Value: data layer 변수 (예:
{{postCreated}})
- Configuration Parameter: (예:
- “Triggering” 아래에서:
- 이전에 생성한 커스텀 이벤트 트리거를 선택합니다.
현재 “Google Analytics: GA4 Event” 태그를 사용 중이라면 계속 작동하지만, 향후 호환성 및 기능을 위해 새로운 구현에는 “Google Tag” 템플릿을 사용하는 것이 좋습니다.
이벤트 네이밍 요구 사항
GA는 이벤트 이름에 대해 특정 요구 사항을 가지고 있습니다:
- snake_case(언더스코어가 포함된 소문자) 사용
- 최대 길이 40자
- 알파벳, 숫자, 언더스코어만 포함 가능
Google Tag 테스트
- GTM에서 “Preview” 버튼을 클릭합니다.
- Discourse 사이트로 이동합니다.
- 추적하려는 작업을 수행합니다 (예: 게시글 생성).
- GTM Preview 모드에서:
- 왼쪽 패널에 커스텀 이벤트가 표시되는지 확인합니다.
- Google Tag가 올바르게 발화되는지 확인합니다.
- 모든 매개변수가 예상대로 전달되는지 확인합니다.
- Google Analytics에서:
- Configure > Events로 이동합니다.
- 이벤트가 트리거된 후 목록에 커스텀 이벤트가 표시되어야 합니다.
- 참고: GA4 보고서에 새로운 이벤트가 표시되도록 최대 24시간이 소요될 수 있습니다.
문제 해결
GTM에서 이벤트를 확인하지 못한다면:
- Discourse에서 GTM 컨테이너 ID가 올바르게 설정되어 있는지 확인합니다.
- 테마 컴포넌트가 모든 활성 테마에 추가되었는지 확인합니다.
- 이벤트가 발화되는지 확인하기 위해
console.log문을 추가합니다:
api.onAppEvent("post:created", post => {
console.log("post:created event triggered");
if (post) {
window.dataLayer.push({
'event': 'postCreated',
'postId': post.id
});
}
});
- Simple Data Layer Viewer Chrome 확장 프로그램을 사용하여 data layer를 모니터링합니다.
- Content Security Policy(CSP) 오류가 보이면 위에서 언급한 사전 요구 사항을 참조하고, 추가 단계를 위해 Mitigate XSS Attacks with Content Security Policy 를 검토하십시오.
ga universal tracking code사이트 설정이 구성된 경우, GTM이 추적 스크립트를 처리하므로 이를 비워 두세요.