# Google Ads 전환태그 설치 가이드
**작성자**: 에코 (실행 & 데이터 수집)
**대상 사이트**:
- `incar-top.tistory.com` — 일반 버전 (상시)
- `incar-top1.tistory.com` — 1200% 룰 긴급성 버전
---
## 전체 흐름 요약
```
Google Ads 계정 생성
→ 전환 액션 3개 생성 (문의폼 / 전화 / 카카오채널)
→ 글로벌 태그(gtag.js) 코드 복사
→ 티스토리 HTML 편집 화면에서 에 삽입
→ 각 버튼에 onclick 이벤트 코드 삽입
→ Tag Assistant로 동작 확인
```
---
## Part 1: Google Ads 전환 설정
### 1-1. Google Ads 계정 접속
1. [https://ads.google.com](https://ads.google.com) 접속 후 로그인
2. 새 Google Ads 계정이라면 초기 캠페인 설정 화면이 나타날 수 있습니다.
- 하단의 "전문가 모드로 전환" 또는 "캠페인 없이 계정 만들기"를 클릭하여 캠페인 생성을 건너뜁니다.
### 1-2. 전환 액션 생성 경로 진입
1. 상단 메뉴에서 **목표(Goals)** 클릭
2. 왼쪽 사이드바에서 **전환 > 요약** 클릭
3. 오른쪽 상단의 **+ 새 전환 액션** 버튼 클릭
### 1-3. 전환 유형 선택
- "전환을 어디서 측정할까요?" 화면에서 **웹사이트** 선택
- 웹사이트 URL 입력란에 `https://incar-top.tistory.com` 입력 후 **스캔** 클릭
- (스캔은 선택 사항이며, 태그를 직접 설치할 경우 건너뛰어도 됩니다)
### 1-4. 전환 액션 3개 생성
아래 3개의 전환 액션을 각각 반복하여 생성합니다.
| 전환 액션 이름 | 카테고리 | 카운팅 방법 | 전환 기간 |
|---|---|---|---|
| 문의폼 제출 | 리드 | 모든 전환 (Every) | 30일 |
| 전화버튼 클릭 | 통화 / 리드 | 모든 전환 (Every) | 30일 |
| 카카오채널 클릭 | 리드 | 모든 전환 (Every) | 30일 |
**각 전환 액션 생성 단계:**
1. 카테고리: **리드** 선택
2. 전환 액션 이름 입력 (예: `문의폼_제출_incar-top`)
3. 전환값: "이 전환에 값 사용 안 함" 선택 (또는 리드당 가치 설정 가능)
4. 카운팅 방법: **모든 전환** 선택
- 이유: 동일 사용자가 여러 번 클릭해도 모두 카운팅하여 데이터를 풍부하게 수집
5. 클릭 후 전환 기간: **30일**
6. 뷰스루 전환 기간: **1일** (기본값 유지)
7. 최적화 포함: **예** 선택
8. **저장 및 계속** 클릭
### 1-5. 태그 설치 방법 선택
"태그를 어떻게 설치하시겠습니까?" 화면에서:
- **"태그를 직접 설치합니다"** 선택
화면에 두 가지 코드가 표시됩니다:
1. **글로벌 사이트 태그 (gtag.js)** — ``에 1회만 삽입
2. **이벤트 스니펫** — 각 버튼의 `onclick` 이벤트에 삽입
> 중요: 전환 ID (`AW-XXXXXXXXX`)와 전환 레이블은 반드시 Google Ads에서 발급된 실제 값으로 교체해야 합니다.
---
## Part 2: 티스토리 HTML 편집 방법
### 2-1. 티스토리 스킨 편집 화면 진입
1. 티스토리 관리 화면 접속: `https://incar-top.tistory.com/manage`
2. 왼쪽 메뉴에서 **꾸미기** 클릭
3. **스킨 편집** 클릭
4. 우측 상단의 **HTML 편집** 탭 클릭
- "HTML", "CSS", "파일업로드" 세 개의 탭이 보입니다.
- **HTML** 탭이 선택된 상태인지 확인합니다.
> 주의사항: HTML 편집 화면에서 기존 코드를 수정하기 전에 반드시 전체 HTML을 복사하여 별도 텍스트 파일에 백업해두세요. 실수로 코드가 손상될 경우 복구할 수 있습니다.
### 2-2. `` 태그 위치 확인
HTML 편집창에서 `Ctrl + F` (또는 브라우저 검색 기능)로 `` 를 검색합니다.
글로벌 사이트 태그는 `` 바로 **앞**에 삽입합니다.
### 2-3. 글로벌 사이트 태그 삽입
아래 코드를 복사하여 `` 바로 앞 줄에 붙여넣습니다.
**`AW-XXXXXXXXX` 부분은 Google Ads에서 발급받은 실제 전환 ID로 교체하세요.**
```html
```
삽입 후 최종 구조 예시:
```html
... (기존 내용) ...
...
```
삽입 후 **적용** 버튼을 클릭하여 저장합니다.
---
## Part 3: 전환 이벤트별 태그 삽입
### A. 문의 폼 제출 전환
#### 원리
티스토리 본문 HTML에서 문의 버튼(또는 제출 버튼)을 찾아 `onclick` 속성에 전환 이벤트 코드를 추가합니다.
#### Google Ads에서 발급되는 이벤트 스니펫 형태
```html
```
> `AW-XXXXXXXXX/YYYYYYYYYY` 형태에서 앞부분은 전환 ID, 뒷부분은 전환 레이블입니다. Google Ads 전환 액션 상세 화면에서 확인할 수 있습니다.
#### 티스토리 버튼에 onclick 이벤트 추가 방법
**방법 1: 게시글 HTML 직접 편집**
1. 해당 게시글 편집 화면 접속
2. 에디터 우측 상단에서 **HTML** 모드로 전환
3. 문의 버튼 HTML을 찾아 아래와 같이 `onclick` 속성 추가
기존 버튼 코드:
```html
문의하기
```
수정 후:
```html
문의하기
```
**방법 2: 폼 submit 이벤트 감지 (JavaScript 방식)**
폼이 실제로 제출될 때 전환을 기록하려면 스킨 HTML 편집 화면의 `` 태그 앞에 아래 스크립트를 추가합니다:
```html
```
> `contact-form`은 티스토리 폼 요소의 실제 `id` 값으로 교체해야 합니다. 브라우저 개발자 도구(F12 → Elements 탭)에서 확인 가능합니다.
---
### B. 전화 버튼 클릭 전환
#### 원리
`tel:` 링크가 클릭될 때 전환 이벤트를 실행합니다.
#### 기존 전화 버튼 코드:
```html
전화 문의
```
#### onclick 이벤트 추가 후:
```html
전화 문의
```
> `AW-XXXXXXXXX/ZZZZZZZZZZ`는 "전화버튼 클릭" 전환 액션의 전환 ID + 레이블입니다.
#### JavaScript 일괄 처리 방식 (전화 링크가 여러 개인 경우):
```html
```
이 스크립트를 스킨 HTML의 `` 태그 앞에 삽입하면 페이지 내 모든 `tel:` 링크 클릭이 자동으로 추적됩니다.
---
### C. 카카오채널 클릭 전환
#### 원리
카카오채널 링크(`https://pf.kakao.com/...`)가 클릭될 때 전환 이벤트를 실행합니다.
#### 기존 카카오채널 버튼 코드 예시:
```html