# 캠페인 GA4/GTM 실전 가이드 **대상 랜딩페이지:** incar-top.tistory.com, incar-top1.tistory.com **작성자:** 이쉬첼 (dev7팀 프론트엔드) **작성일:** 2026-03-25 --- ## 섹션 1: GA4/GTM 설정 가이드 ### 1-1. GA4 속성 설정 #### GA4 속성 생성 절차 1. [analytics.google.com](https://analytics.google.com) 에 접속하여 구글 계정으로 로그인한다. 2. 왼쪽 하단의 **관리(Admin)** 아이콘(톱니바퀴)을 클릭한다. 3. **계정(Account)** 열에서 기존 계정을 선택하거나, 없으면 **계정 만들기**를 클릭하여 계정명(예: `incar-top 캠페인`)을 입력하고 데이터 공유 설정은 기본값으로 두고 **다음**을 누른다. 4. **속성(Property)** 열에서 **속성 만들기(Create property)**를 클릭한다. 5. 속성 이름 입력란에 식별하기 쉬운 이름을 입력한다. 예: `incar-top 블로그`. 6. 보고 시간대는 `대한민국`으로 설정하고, 통화는 `대한민국 원(KRW)`으로 선택한다. 7. **다음**을 클릭한다. 8. 비즈니스 정보 단계에서 업종은 `자동차` 또는 `서비스`로 선택하고, 비즈니스 규모는 실정에 맞게 선택한 후 **다음**을 클릭한다. 9. 비즈니스 목표 단계에서 `리드 생성` 또는 `기준선 보고서 얻기`를 선택하고 **만들기**를 클릭한다. 10. 서비스 약관 동의 창이 뜨면 국가를 `대한민국`으로 선택하고 약관에 동의한다. > 참고: incar-top.tistory.com 과 incar-top1.tistory.com 두 도메인은 별도 속성으로 만들거나, 하나의 속성에 스트림을 두 개 추가할 수 있다. 전환 분석을 독립적으로 보려면 속성을 분리하는 것을 권장한다. --- #### 데이터 스트림 설정 (웹) 속성 생성 직후 데이터 스트림 추가 화면이 자동으로 표시된다. 이미 속성이 있는 경우에는 아래 경로로 진입한다. **경로:** 관리 > 속성 열 > 데이터 스트림(Data Streams) > 스트림 추가 > 웹 **incar-top.tistory.com 스트림 추가 절차** 1. **플랫폼**에서 **웹(Web)**을 선택한다. 2. 웹사이트 URL 입력란에 `https://incar-top.tistory.com` 을 입력한다. 3. 스트림 이름 입력란에 `incar-top 블로그` 등 구분 가능한 이름을 입력한다. 4. **향상된 측정(Enhanced Measurement)** 토글이 켜져 있는지 확인한다 (기본값: 켜짐). 5. **스트림 만들기**를 클릭한다. 6. 생성된 스트림 상세 화면에서 **측정 ID(G-XXXXXXXXXX)** 를 복사하여 별도로 보관한다. **incar-top1.tistory.com 스트림 추가 절차** 1. 같은 속성의 데이터 스트림 목록으로 돌아가 **스트림 추가 > 웹**을 다시 클릭한다. 2. URL 입력란에 `https://incar-top1.tistory.com` 을 입력한다. 3. 스트림 이름 입력란에 `incar-top1 블로그`를 입력한다. 4. 향상된 측정 토글 확인 후 **스트림 만들기**를 클릭한다. 5. 새로 생성된 스트림의 **측정 ID(G-XXXXXXXXXX)** 를 복사하여 보관한다. --- #### 측정 ID (G-XXXXXXXXXX) 확인 방법 - **경로:** 관리 > 속성 > 데이터 스트림 > 해당 스트림 클릭 - 스트림 상세 페이지 오른쪽 상단에 `G-` 로 시작하는 문자열이 측정 ID다. - 이 ID는 GTM의 GA4 구성 태그와 커스텀 HTML 태그에서 사용하므로 반드시 메모해 둔다. - 두 스트림(incar-top / incar-top1)의 측정 ID는 각각 다르므로, 어느 도메인에 어느 ID를 사용할지 명확히 기록한다. --- #### 향상된 측정(Enhanced Measurement) 권장 설정 스트림 상세 화면에서 향상된 측정 항목의 톱니바퀴 아이콘을 클릭하면 세부 항목을 켜고 끌 수 있다. 캠페인 특성상 아래 항목을 **켜짐(ON)** 상태로 유지할 것을 권장한다. - **페이지 조회수(Page views)**: 기본 활성화. 반드시 켜둔다. - **스크롤(Scrolls)**: 90% 스크롤 이벤트를 자동 수집한다. 단, GTM에서 별도로 scroll_depth_50 / scroll_depth_90 커스텀 이벤트를 정의할 경우 중복 카운트에 주의한다. GA4 내장 스크롤과 GTM 커스텀 스크롤 중 하나만 사용하거나, 이벤트 이름을 달리하여 구분한다. - **이탈 클릭(Outbound clicks)**: 블로그 외부 링크 클릭을 자동 수집한다. 켜둔다. - **사이트 검색(Site search)**: 티스토리 블로그에는 검색 기능이 제한적이므로 선택 사항이다. - **동영상 참여도(Video engagement)**: 유튜브 임베드 영상이 있다면 켜둔다. - **파일 다운로드(File downloads)**: 다운로드 자료가 없다면 꺼도 무방하다. --- ### 1-2. GTM 컨테이너 설정 #### Google Tag Manager 컨테이너 생성 절차 1. [tagmanager.google.com](https://tagmanager.google.com) 에 접속하여 구글 계정으로 로그인한다. 2. 첫 접속 시 **계정 만들기** 버튼이 표시된다. 이미 계정이 있다면 오른쪽 상단의 **계정 만들기**를 클릭한다. 3. **계정 이름**에 `incar-top 캠페인` 등을 입력한다. 4. **국가**를 `대한민국`으로 선택한다. 5. 컨테이너 설정 단계에서 **컨테이너 이름**을 입력한다. 예: `incar-top.tistory.com`. 6. **타겟 플랫폼**은 **웹(Web)**을 선택한다. 7. **만들기**를 클릭하고 서비스 약관에 동의한다. 8. GTM 스니펫 코드가 담긴 팝업이 표시된다. 이 코드를 복사하여 보관한다 (스니펫은 나중에도 관리 메뉴에서 다시 확인 가능하다). 9. incar-top1.tistory.com 용으로 별도 컨테이너가 필요하다면 같은 계정에서 **컨테이너 추가**를 반복한다. > 컨테이너 ID는 `GTM-XXXXXXX` 형식이며, 스니펫 코드 안에 포함되어 있다. --- #### 티스토리 HTML 편집에서 GTM 스니펫 삽입 위치 티스토리에서 스킨 HTML을 직접 편집하여 GTM 스니펫을 삽입한다. **HTML 편집 진입 경로:** ``` 티스토리 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 ``` 1. 티스토리 블로그 관리 페이지(블로그주소/manage)에 로그인 상태로 접속한다. 2. 왼쪽 메뉴에서 **꾸미기**를 클릭한다. 3. **스킨 편집**을 클릭한다. 4. 우측 상단의 **html 편집** 버튼을 클릭한다. 5. HTML 편집 탭이 활성화되면, `` 태그를 찾는다. **GTM 스니펫 삽입 위치 (head 코드)** GTM이 제공하는 첫 번째 스니펫(script 태그)을 `` 여는 태그 바로 다음에 붙여넣는다. ```html ``` **GTM 스니펫 삽입 위치 (body 코드)** GTM이 제공하는 두 번째 스니펫(noscript 태그)을 `` 여는 태그 바로 다음에 붙여넣는다. ```html ``` > `GTM-XXXXXXX` 자리에는 본인의 실제 컨테이너 ID를 입력한다. **티스토리 HTML 편집 주의사항** - 티스토리 스킨에 따라 `` 혹은 `` 태그가 `[##_head_##]` 또는 치환자 형태로 표현될 수 있다. 이 경우 치환자 바로 위 또는 아래에 삽입한다. - HTML 저장 후 반드시 실제 블로그 페이지를 새 탭에서 열어 GTM 스니펫이 정상 로드되는지 확인한다 (브라우저 개발자 도구 > 네트워크 탭에서 `gtm.js` 요청 확인). - 스킨 업데이트 시 HTML이 초기화될 수 있으므로, 삽입한 코드를 별도로 백업해 둔다. --- #### GTM 미리보기(Preview) 모드 확인 방법 GTM 미리보기 모드는 태그와 트리거가 실제로 발화하는지 실시간으로 확인하는 필수 도구다. 1. GTM 작업 공간 상단 오른쪽의 **미리보기(Preview)** 버튼을 클릭한다. 2. **Google Tag Assistant** 팝업이 열리면, **Your website's URL** 입력란에 `https://incar-top.tistory.com` 을 입력하고 **Connect**를 클릭한다. 3. 새 탭에서 해당 블로그 페이지가 열리고, Tag Assistant 패널이 하단 또는 별도 창에 연결된다. 4. Tag Assistant에서 **Connected** 상태가 표시되면 미리보기가 활성화된 것이다. 5. 블로그 페이지에서 스크롤, 클릭, 폼 입력 등의 행동을 취하면 Tag Assistant 패널에 해당 이벤트와 발화된 태그 목록이 실시간으로 표시된다. 6. 왼쪽 패널에서 이벤트를 클릭하면 **Tags Fired** (발화된 태그)와 **Tags Not Fired** (미발화 태그)를 확인할 수 있다. 7. 확인이 끝나면 GTM 작업 공간으로 돌아가 **Leave Preview Mode**를 클릭하거나 미리보기 창을 닫는다. > 미리보기 모드에서 확인이 완료되면 GTM 작업 공간에서 **제출(Submit)** > **게시(Publish)** 를 눌러야 실제 운영 환경에 적용된다. --- ## 섹션 2: GTM 이벤트 정의 + 코드 아래 7개 이벤트를 GTM에서 정의한다. 각 이벤트마다 트리거 생성, 태그 생성, 발화 테스트 방법을 순서대로 설명한다. --- ### 이벤트 1: page_view GA4가 기본으로 수집하는 이벤트다. 별도의 커스텀 이벤트 태그 없이 **GA4 구성 태그(Configuration Tag)** 만 설정하면 자동으로 수집된다. #### 태그 생성 방법 1. GTM 작업 공간 왼쪽 메뉴에서 **태그(Tags)** 를 클릭하고 **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 구성 - incar-top` 으로 입력한다. 3. **태그 구성** 영역을 클릭하고 태그 유형에서 **Google Analytics: GA4 구성(Configuration)** 을 선택한다. 4. **측정 ID** 입력란에 GA4 데이터 스트림에서 복사한 측정 ID(G-XXXXXXXXXX)를 입력한다. 5. **페이지 로드 시 구성 설정 전송** 옵션이 체크되어 있는지 확인한다 (기본 체크). 6. **트리거** 영역을 클릭하고 **All Pages (모든 페이지 조회)** 트리거를 선택한다. 7. **저장**을 클릭한다. > incar-top1.tistory.com 용으로는 동일한 방법으로 `GA4 구성 - incar-top1` 태그를 별도로 만들고, 해당 도메인의 측정 ID를 입력한다. 트리거는 도메인별로 구분이 필요하다면 Page URL 조건을 추가한다. #### 발화 테스트 방법 1. GTM 미리보기 모드를 실행하고 블로그 페이지를 연다. 2. Tag Assistant에서 `gtm.js` 이벤트(초기 로드)를 클릭한다. 3. **Tags Fired** 목록에 `GA4 구성 - incar-top` 태그가 표시되면 정상이다. 4. GA4 실시간 보고서(analytics.google.com > 보고서 > 실시간)에서 `page_view` 이벤트가 수신되는지 확인한다. --- ### 이벤트 2: scroll_depth_50 페이지를 50% 스크롤했을 때 발화하는 이벤트다. #### 트리거 생성 방법 1. GTM에서 **트리거(Triggers)** 메뉴를 열고 **새로 만들기**를 클릭한다. 2. 트리거 이름을 `스크롤 50%`로 입력한다. 3. **트리거 구성**을 클릭하고 트리거 유형에서 **스크롤 깊이(Scroll Depth)** 를 선택한다. 4. **세로 스크롤 깊이(Vertical Scroll Depths)** 를 체크한다. 5. **비율(Percentages)** 라디오버튼을 선택하고 입력란에 `50`을 입력한다. 6. **이 트리거 실행 시점**은 **모든 페이지(All Pages)** 로 설정한다. 7. **저장**을 클릭한다. #### 태그 생성 방법 1. **태그** 메뉴에서 **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 이벤트 - scroll_depth_50`으로 입력한다. 3. **태그 구성**에서 **Google Analytics: GA4 이벤트(Event)** 를 선택한다. 4. **구성 태그**에서 앞서 만든 `GA4 구성 - incar-top` 태그를 선택한다. 5. **이벤트 이름**에 `scroll_depth_50`을 입력한다. 6. 이벤트 매개변수를 추가하려면 **이벤트 매개변수 추가** 버튼을 클릭한다. - 매개변수 이름: `percent_scrolled`, 값: `50` 7. **트리거**에서 앞서 만든 `스크롤 50%` 트리거를 선택한다. 8. **저장**을 클릭한다. #### 발화 테스트 방법 1. GTM 미리보기 모드에서 블로그 페이지를 열고 50% 지점까지 스크롤한다. 2. Tag Assistant에서 `gtm.scrollDepth` 이벤트가 표시되고, 해당 이벤트를 클릭하면 **Tags Fired**에 `GA4 이벤트 - scroll_depth_50`이 나타나야 한다. 3. GA4 실시간 보고서에서 `scroll_depth_50` 이벤트를 확인한다. --- ### 이벤트 3: scroll_depth_90 페이지를 90% 스크롤했을 때 발화하는 이벤트다. #### 트리거 생성 방법 1. GTM에서 **트리거** > **새로 만들기**를 클릭한다. 2. 트리거 이름을 `스크롤 90%`로 입력한다. 3. 트리거 유형에서 **스크롤 깊이**를 선택한다. 4. **세로 스크롤 깊이**를 체크하고 **비율**을 선택한 후 `90`을 입력한다. 5. 실행 시점은 **모든 페이지**로 설정한다. 6. **저장**을 클릭한다. > GA4 향상된 측정에서 스크롤 이벤트(scroll)가 활성화되어 있다면, GA4는 90% 스크롤 시 자동으로 `scroll` 이벤트를 수집한다. 이 이벤트와 구분하기 위해 GTM의 커스텀 이벤트 이름을 `scroll_depth_90`으로 명시적으로 다르게 지정한다. #### 태그 생성 방법 1. **태그** > **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 이벤트 - scroll_depth_90`으로 입력한다. 3. 태그 유형은 **Google Analytics: GA4 이벤트**를 선택한다. 4. **구성 태그**는 `GA4 구성 - incar-top`을 선택한다. 5. **이벤트 이름**에 `scroll_depth_90`을 입력한다. 6. 이벤트 매개변수 추가: - 매개변수 이름: `percent_scrolled`, 값: `90` 7. **트리거**에서 `스크롤 90%`를 선택하고 **저장**한다. #### 발화 테스트 방법 1. GTM 미리보기 모드에서 블로그 페이지를 90% 이상 스크롤한다. 2. Tag Assistant의 `gtm.scrollDepth` 이벤트에서 **Tags Fired**에 `GA4 이벤트 - scroll_depth_90`이 표시되는지 확인한다. 3. GA4 실시간 보고서에서 `scroll_depth_90` 이벤트를 확인한다. --- ### 이벤트 4: form_start 폼 필드에 처음 포커스가 들어갈 때(입력 시작 시) 발화하는 이벤트다. **중요 주의사항:** 티스토리는 외부 스크립트 삽입과 DOM 구조에 제약이 있다. GTM의 기본 Element Visibility 트리거나 Form 트리거가 티스토리 폼 구조에서 정상 동작하지 않을 수 있다. 이 경우 **커스텀 HTML 태그**를 사용하여 `focusin` 이벤트 리스너를 직접 구현하고, `dataLayer.push`로 GTM에 신호를 보내는 방식을 사용한다. #### 방법 A: 커스텀 HTML 태그 (권장) **커스텀 HTML 태그 생성 방법** 1. GTM에서 **태그** > **새로 만들기**를 클릭한다. 2. 태그 이름을 `커스텀 HTML - form_start 리스너`로 입력한다. 3. **태그 구성**에서 **커스텀 HTML**을 선택한다. 4. 아래 코드를 HTML 입력란에 붙여넣는다. ```html ``` 5. **트리거**에서 **All Pages** 트리거를 선택한다 (페이지 로드 시 리스너를 등록해야 하므로). 6. **저장**을 클릭한다. **GTM 트리거 생성 방법 (dataLayer 이벤트 수신용)** 1. **트리거** > **새로 만들기**를 클릭한다. 2. 트리거 이름을 `커스텀 이벤트 - form_start`로 입력한다. 3. 트리거 유형에서 **커스텀 이벤트(Custom Event)** 를 선택한다. 4. **이벤트 이름**에 `form_start`를 입력한다. 5. **저장**을 클릭한다. **GA4 이벤트 태그 생성 방법** 1. **태그** > **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 이벤트 - form_start`로 입력한다. 3. 태그 유형은 **Google Analytics: GA4 이벤트**를 선택한다. 4. **구성 태그**에서 `GA4 구성 - incar-top`을 선택한다. 5. **이벤트 이름**에 `form_start`를 입력한다. 6. 이벤트 매개변수: - 매개변수 이름: `form_name`, 값: `{{DLV - form_name}}` (DataLayer 변수 사용 또는 직접 `landing_form` 입력) 7. **트리거**에서 `커스텀 이벤트 - form_start`를 선택하고 **저장**한다. #### 발화 테스트 방법 1. GTM 미리보기 모드에서 블로그 페이지를 열고 폼 필드 중 하나를 클릭(포커스)한다. 2. Tag Assistant에서 `form_start` 커스텀 이벤트가 나타나는지 확인한다. 3. 해당 이벤트를 클릭하면 **Tags Fired**에 `GA4 이벤트 - form_start`가 표시되어야 한다. 4. GA4 실시간 보고서에서 `form_start` 이벤트를 확인한다. 5. `formStartFired` 플래그로 인해 같은 페이지 세션에서 두 번 이상 발화하지 않는지도 확인한다. --- ### 이벤트 5: form_complete 폼이 제출될 때 발화하는 이벤트다. #### 트리거 생성 방법 1. GTM에서 **트리거** > **새로 만들기**를 클릭한다. 2. 트리거 이름을 `폼 제출 - landing form`으로 입력한다. 3. 트리거 유형에서 **양식 제출(Form Submission)** 을 선택한다. 4. **이 트리거 실행 위치**에서 조건을 추가한다: - 조건: **Form ID** 또는 **Page URL** 조건으로 특정 폼을 한정할 수 있다. - 모든 폼 제출을 캡처하려면 조건 없이 **모든 양식(All Forms)** 으로 설정한다. 5. **저장**을 클릭한다. > 티스토리에 따라 Form Submission 트리거가 동작하지 않을 수 있다. 이 경우 아래 커스텀 HTML 방식을 사용한다. **커스텀 HTML 대안 (Form Submission이 동작하지 않을 때)** ```html ``` 이 태그는 form_start 리스너 태그와 동일하게 **All Pages** 트리거에 연결한다. GA4 이벤트 태그는 커스텀 이벤트 트리거 `form_complete`를 수신하도록 별도 생성한다. #### 태그 생성 방법 1. **태그** > **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 이벤트 - form_complete`로 입력한다. 3. 태그 유형은 **Google Analytics: GA4 이벤트**를 선택한다. 4. **구성 태그**에서 `GA4 구성 - incar-top`을 선택한다. 5. **이벤트 이름**에 `form_complete`를 입력한다. 6. 이벤트 매개변수: - 매개변수 이름: `form_name`, 값: `landing_form` 7. **트리거**에서 `폼 제출 - landing form` (또는 커스텀 이벤트 `form_complete` 트리거)를 선택하고 **저장**한다. #### 발화 테스트 방법 1. GTM 미리보기 모드에서 폼을 실제로 제출한다 (테스트 데이터 입력 후 제출 버튼 클릭). 2. Tag Assistant에서 `gtm.formSubmit` 또는 커스텀 `form_complete` 이벤트를 확인한다. 3. **Tags Fired**에 `GA4 이벤트 - form_complete`가 표시되어야 한다. 4. GA4 실시간 보고서에서 `form_complete` 이벤트를 확인한다. --- ### 이벤트 6: phone_click `tel:` 링크를 클릭할 때 발화하는 이벤트다. 전화번호 클릭 추적에 사용한다. #### 트리거 생성 방법 1. GTM에서 **트리거** > **새로 만들기**를 클릭한다. 2. 트리거 이름을 `클릭 - 전화번호 링크`로 입력한다. 3. 트리거 유형에서 **클릭 - 링크만(Just Links)** 을 선택한다. 4. **태그 실행 전 대기** 옵션은 필요 시 체크한다. 5. **이 트리거 실행 조건**에서: - 변수: **Click URL** - 조건: **다음을 포함(contains)** - 값: `tel:` 6. **저장**을 클릭한다. #### 태그 생성 방법 1. **태그** > **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 이벤트 - phone_click`으로 입력한다. 3. 태그 유형은 **Google Analytics: GA4 이벤트**를 선택한다. 4. **구성 태그**에서 `GA4 구성 - incar-top`을 선택한다. 5. **이벤트 이름**에 `phone_click`을 입력한다. 6. 이벤트 매개변수: - 매개변수 이름: `phone_number`, 값: `{{Click URL}}` 7. **트리거**에서 `클릭 - 전화번호 링크`를 선택하고 **저장**한다. #### 발화 테스트 방법 1. GTM 미리보기 모드에서 블로그 페이지의 전화번호 링크를 클릭한다. 2. Tag Assistant에서 `gtm.linkClick` 이벤트가 표시되고, 해당 이벤트의 **Tags Fired**에 `GA4 이벤트 - phone_click`이 나타나야 한다. 3. GA4 실시간 보고서에서 `phone_click` 이벤트를 확인한다. 4. 이벤트 매개변수에서 `phone_number` 값이 올바른 전화번호(tel:로 시작하는 URL)로 전달되는지 확인한다. --- ### 이벤트 7: cta_button_click CTA(Call-to-Action) 버튼 클릭 시 발화하는 이벤트다. CSS Selector를 사용하여 특정 버튼을 지정한다. #### 트리거 생성 방법 1. GTM에서 **트리거** > **새로 만들기**를 클릭한다. 2. 트리거 이름을 `클릭 - CTA 버튼`으로 입력한다. 3. 트리거 유형에서 **클릭 - 모든 요소(All Elements)** 를 선택한다. 4. **이 트리거 실행 조건**에서: - 변수: **Click Classes** 또는 **Click Element** - 실제 티스토리 블로그의 CTA 버튼 HTML을 확인한 후 적절한 CSS Selector를 사용한다. - 예시 조건 (Click Classes 기준): **다음을 포함** / `cta-btn` - 또는 **CSS Selector** 방식으로 설정하려면 **Click Element** > **CSS 선택기 일치** > `.cta-button` 또는 `#apply-btn` 등 실제 셀렉터를 입력한다. > 실제 CTA 버튼의 HTML 구조를 먼저 브라우저 개발자 도구로 확인한 후 셀렉터를 결정한다. 예: `상담 신청` 이라면 Click Classes에 `cta-btn`을 조건으로 사용한다. 5. **저장**을 클릭한다. #### CSS Selector 기반 클릭 변수 설정 (심화) GTM 기본 클릭 변수가 충분하지 않을 경우 커스텀 JavaScript 변수를 추가하여 보다 정밀하게 요소를 특정할 수 있다. 1. GTM **변수(Variables)** 메뉴에서 **새로 만들기**를 클릭한다. 2. 변수 이름을 `JS - CTA 버튼 여부`로 입력한다. 3. 변수 유형에서 **맞춤 JavaScript(Custom JavaScript)** 를 선택한다. 4. 아래 코드를 입력한다. ```javascript function() { var el = {{Click Element}}; if (!el) return false; // 실제 CTA 버튼 셀렉터를 여기에 지정한다 return el.matches('.cta-btn, .cta-button, #apply-btn, [data-role="cta"]') || el.closest('.cta-btn, .cta-button, #apply-btn, [data-role="cta"]') !== null; } ``` 5. 저장 후 트리거 조건에서 이 변수를 사용한다: - 변수: `JS - CTA 버튼 여부` / 조건: `같음(equals)` / 값: `true` #### 태그 생성 방법 1. **태그** > **새로 만들기**를 클릭한다. 2. 태그 이름을 `GA4 이벤트 - cta_button_click`으로 입력한다. 3. 태그 유형은 **Google Analytics: GA4 이벤트**를 선택한다. 4. **구성 태그**에서 `GA4 구성 - incar-top`을 선택한다. 5. **이벤트 이름**에 `cta_button_click`을 입력한다. 6. 이벤트 매개변수: - 매개변수 이름: `button_text`, 값: `{{Click Text}}` - 매개변수 이름: `button_url`, 값: `{{Click URL}}` 7. **트리거**에서 `클릭 - CTA 버튼`을 선택하고 **저장**한다. #### 발화 테스트 방법 1. GTM 미리보기 모드에서 블로그 페이지의 CTA 버튼을 클릭한다. 2. Tag Assistant에서 `gtm.click` 이벤트를 클릭하고 **Tags Fired**에 `GA4 이벤트 - cta_button_click`이 표시되는지 확인한다. 3. 이벤트 상세에서 `button_text`와 `button_url` 매개변수 값이 올바른지 확인한다. 4. GA4 실시간 보고서에서 `cta_button_click` 이벤트를 확인한다. 5. 의도치 않은 요소에서도 이벤트가 발화되고 있다면 CSS Selector 조건을 더 구체적으로 수정한다. --- ## 섹션 3: 전환 연동 ### 3-1. Meta 픽셀과 GA4 form_complete 이벤트 중복 카운트 방지 GA4와 Meta(Facebook/Instagram) 픽셀을 동시에 운영하면 동일 전환이 두 플랫폼에서 각각 카운트되어 실제보다 많아 보이는 이중 카운트 문제가 발생할 수 있다. 또한 Meta 픽셀과 Meta 전환 API(Conversions API, CAPI)를 함께 사용하면 픽셀과 CAPI 간에도 중복이 생긴다. --- #### Meta 전환 API vs 픽셀 이벤트 중복 제거 (event_id 사용) Meta는 픽셀(브라우저)과 전환 API(서버)에서 동일 이벤트를 중복으로 수신할 경우, `event_id` 값이 동일하면 중복으로 인식하여 하나만 카운트한다. 이를 **이벤트 중복 제거(Deduplication)** 라고 한다. **구현 방법** 1. 폼 제출 시 고유한 `event_id`를 생성한다. 일반적으로 타임스탬프와 랜덤 값을 조합한다. ```javascript function generateEventId() { return Date.now().toString() + '_' + Math.random().toString(36).substr(2, 9); } ``` 2. GTM 커스텀 HTML 태그에서 `form_complete` 이벤트 발화 시 `event_id`를 생성하여 `dataLayer`에 함께 포함시킨다. ```html ``` 3. 서버 측 전환 API(CAPI)를 사용하는 경우, 위에서 생성한 동일한 `eventId` 값을 서버 API 요청의 `event_id` 필드에도 포함시킨다. Meta는 픽셀에서 받은 이벤트와 CAPI로 받은 이벤트의 `event_id`가 동일하면 중복으로 처리하여 한 번만 카운트한다. 4. Meta 이벤트 관리자에서 **데이터 소스 > 픽셀 > 이벤트 테스트** 탭을 통해 중복 제거가 정상 동작하는지 확인할 수 있다. --- #### GA4와 Meta 간 동일 전환 이중 카운트 방지 전략 GA4와 Meta는 서로 다른 독립 플랫폼이므로, 동일 사용자의 전환이 GA4에서 1건, Meta에서도 1건으로 각각 집계되는 것은 정상이다. 문제는 이를 성과 보고 시 합산하여 혼동하는 경우다. **권장 전략** 1. **전환 소유권(Conversion Attribution) 구분**: GA4는 Google 채널(SEO, 구글 광고, 직접 유입) 성과 측정에 사용하고, Meta는 Meta 채널(Facebook/Instagram 광고) 성과 측정에 사용한다. 두 플랫폼의 전환 수치를 단순 합산하지 않는다. 2. **UTM 파라미터 활용**: 모든 Meta 광고 링크에 UTM 파라미터를 붙여 GA4에서 Meta 채널 유입을 구분한다. - 예: `?utm_source=facebook&utm_medium=paid_social&utm_campaign=incar-top-2026` - GA4에서는 이 UTM이 붙은 세션의 form_complete 건수를 Meta 광고 전환으로 참고한다. 3. **전환 이벤트 이름 통일**: GA4의 `form_complete` 이벤트와 Meta 픽셀의 `Lead` 이벤트는 서로 다른 이름을 사용하므로 혼동을 줄인다. 보고서 작성 시 어느 플랫폼의 어떤 이벤트를 기준으로 하는지 명확히 문서화한다. 4. **Google Analytics 보고서에서 Meta 전환 이중 집계 방지**: Google Ads 전환 가져오기(섹션 3-2 참조)를 사용할 때, Meta 광고로 발생한 GA4 전환이 Google Ads 전환으로 잘못 집계되지 않도록 한다. Google Ads 전환은 Google Ads 클릭(gclid)이 있는 세션에서만 집계되므로 일반적으로 자동으로 구분된다. 5. **중복 없는 단일 소스 보고**: 전체 전환 성과를 하나의 숫자로 파악하려면 CRM 또는 서버 측 기록을 신뢰도 높은 단일 소스(Single Source of Truth)로 사용한다. 플랫폼별 수치는 각 채널의 기여도 참고용으로만 활용한다. --- ### 3-2. Google Ads ← GA4 전환 가져오기 절차 #### GA4에서 전환 이벤트 설정 Google Ads로 가져오기 전에 GA4에서 전환으로 마킹할 이벤트를 먼저 설정한다. 1. GA4 관리 페이지(analytics.google.com > 관리)로 이동한다. 2. **속성** 열에서 **이벤트(Events)** 를 클릭한다. 3. 이벤트 목록에서 `form_complete` 이벤트를 찾는다 (GTM이 이미 해당 이벤트를 수집 중이어야 목록에 표시된다). 4. `form_complete` 이벤트 행의 오른쪽 끝에 있는 **전환으로 표시(Mark as conversion)** 토글을 켠다. 5. 같은 방법으로 `cta_button_click`이나 `phone_click`도 전환 이벤트로 추가할 수 있다. > 이벤트가 목록에 보이지 않는다면, GTM 미리보기 + 실제 이벤트 발화로 GA4에 최소 1회 이상 데이터가 수집된 후 최대 24시간이 지나야 목록에 나타난다. 6. **속성** 열에서 **전환(Conversions)** 메뉴를 클릭하면 전환으로 마킹된 이벤트 목록을 확인할 수 있다. --- #### Google Ads에서 GA4 전환 가져오기 (step-by-step) **사전 조건:** Google Ads 계정과 GA4 속성이 동일한 Google 계정으로 연결(링크)되어 있어야 한다. **GA4-Google Ads 연결 방법 (아직 연결되지 않은 경우)** 1. GA4 관리 > **속성** 열 > **Google Ads 링크(Google Ads Links)** 를 클릭한다. 2. **연결(Link)** 버튼을 클릭한다. 3. 연결할 Google Ads 계정을 선택하고 **다음**을 클릭한다. 4. 설정을 확인하고 **제출**을 클릭한다. **Google Ads에서 GA4 전환 가져오기** 1. [ads.google.com](https://ads.google.com) 에 로그인한다. 2. 상단 메뉴에서 **목표(Goals)** > **전환(Conversions)** > **요약(Summary)** 을 클릭한다. 3. 왼쪽의 **전환 액션(Conversion Actions)** 목록 위의 **+ 새 전환 액션**을 클릭한다. 4. 전환 유형 선택 화면에서 **Google Analytics 4 속성 가져오기(Import from Google Analytics 4 properties)** 를 선택한다. 5. 연결된 GA4 속성 목록이 표시된다. 해당 속성을 선택한다. 6. GA4에서 전환으로 마킹한 이벤트 목록(예: `form_complete`)이 표시된다. 7. 가져올 전환 이벤트 왼쪽의 체크박스를 선택하고 **가져오기 및 계속(Import and Continue)** 을 클릭한다. 8. 전환 액션 설정 화면에서 아래 항목을 확인한다. - **전환 액션 이름**: GA4 이벤트 이름이 자동으로 표시된다. 필요시 수정한다. - **카테고리**: `잠재 고객` 또는 `제출`로 설정한다. - **전환 값**: 각 전환의 가치를 수치로 입력하거나 `사용 안함`을 선택한다. - **전환 창(Conversion window)**: 클릭 후 전환 추적 기간. 기본값 30일 또는 캠페인에 맞게 조정한다. - **포함 여부**: `전환에 포함`을 선택하면 스마트 입찰 최적화에 반영된다. 9. **완료**를 클릭한다. **가져오기 후 확인** 1. Google Ads > 목표 > 전환 > 요약에서 새로 가져온 전환 액션이 목록에 표시되는지 확인한다. 2. **상태** 열에 `데이터 기록 중` 또는 `전환 추적 중`이 표시되면 정상이다. 3. GA4에서 전환 이벤트가 발생한 후 Google Ads 전환 보고서에 데이터가 반영되기까지 최대 24~48시간이 소요될 수 있다. 4. Google Ads 캠페인 설정에서 이 전환 액션을 **입찰 최적화 대상**으로 사용하도록 설정한다. **주의사항** - GA4 전환 가져오기를 사용하면 Google Ads 자체 전환 태그(gtag.js 기반)와 중복 설치하지 않도록 한다. GTM에 이미 Google Ads 전환 태그를 별도로 설치했다면 제거하거나 비활성화하고 GA4 가져오기 방식을 단일 소스로 사용한다. - GA4 가져오기 전환은 Google Ads 클릭 후 GA4에서 발생한 전환을 기준으로 하므로, GA4 데이터 처리 지연(최대 24시간)을 고려해야 한다. --- ## 섹션 4: GTM 컨테이너 Export JSON 위 설정을 GTM 컨테이너 JSON으로 export한 파일을 제공한다. 제이회장님이 GTM에서 Import만 하면 트리거/태그가 자동 생성된다. **파일 경로:** `/home/jay/workspace/memory/specs/campaign-gtm-container.json` ### Import 방법 1. [tagmanager.google.com](https://tagmanager.google.com) 에 접속하여 해당 컨테이너를 선택한다. 2. 상단 **관리(Admin)** 탭을 클릭한다. 3. **컨테이너 가져오기(Import Container)** 를 클릭한다. 4. **JSON 파일 선택**에서 `campaign-gtm-container.json` 파일을 업로드한다. 5. **작업 영역 선택**: 기존 작업 영역 또는 새 작업 영역을 선택한다. 6. **가져오기 옵션**: `병합(Merge)` > `이름 충돌 시 새 태그 이름 바꾸기(Rename conflicting tags)` 를 선택한다. 7. **확인**을 클릭하면 태그 8개, 트리거 7개가 한 번에 생성된다. ### Import 후 필수 수정 사항 1. **GA4 측정 ID 교체**: `GA4 Configuration Tag` 태그를 열어 `G-XXXXXXXXXX`를 실제 측정 ID로 변경한다. 2. **CTA 버튼 CSS Selector 확인**: `CTA Button Click` 트리거의 CSS Selector(`.btn-cta, .cta-button, [data-cta]`)가 실제 랜딩페이지의 CTA 버튼 클래스와 일치하는지 확인하고, 필요시 수정한다. 3. **GTM 미리보기(Preview)** 모드에서 각 이벤트 발화를 테스트한 후 **제출(Publish)** 한다.