마케터 지망생의 GTM 정복기｜팝업 이미지 띄우고 링크 연결까지!

지난 시간에 GTM으로 태그 설치하고 이벤트 생성하는 법을 배웠는데요.

▼내용 참고
[TIL-260320] 멋쟁이사자처럼 부트캠프 그로스마케팅 4기 - 대시보드제작 day8 

 

GTM 태그 수업을 열심히 듣고나니 이렇게 재밌는 GTM태그를 응용을 해보고 싶죠?

나도..나도 팝업이미지 띄우고 싶은데? 그런데 버튼 링크도 연결하고 싶어

버튼 클릭하면 내가 설정한 링크로 연결된다? 두근

 

그래서 media mix의 신념을 이어받아 mix한 태그를 설정해 보려 합니다.

목표는 [마케터 종류 분석 게시글의 분석표 단락에 스크롤이 도착한 후 5초가 지나면 마케터유형테스트 팝업이 뜨고, 이 버튼을 누르면 마케터유형테스트로 연결되게 하는 것] 생각만 해도 멋있잖아?

attitude는 quick quick fast 

 

우선 할 일을 정리해봅시다.

1. 마케터 종류 분석 게시글 작성

2. 연결할 사이트 제작 : 마케터 유형 테스트 제작 (smore 사용)

3. GTM 태그 생성 

4. GTM 트리거 생성

5. GTM 태그 미리보기 및 게시

 

이건 제 머릿속에서 나온 것이니 똑똑이에게 컨펌을 받아야합니다.

GTM에서 단락에 체류하는 변수만 추가하면 될 줄 알고 변수명을 물어봤는데 그냥 처음부터 목표랑 하고싶은 일을 물어볼 걸..

 

 

역시나 처음 듣는 '요소가시성'이라는 설정을 해줘야 게시글 내 원하는 단락에서 실행된다네요.

 

음, 목표가 길긴 했어

빠르게 목표를 수정해서 [티스토리에 10초 이상 머물면 마케터유형테스트 팝업 생성하기]로 갑니다.

다만, 팝업 이미지를 주어진 html말고 약간의 스타일을 바꾸는 것까지 포함해볼게요.

 

1번, 2번은 자체적으로 마무리 했고요.

여기서는 바로 GTM으로 가서 태그를 설치해봅시다.

 

3. GTM 태그 생성

구글태그매니저 → 태그 → 새로만들기 → 태그구성 : 맞춤 HTML을 선택합니다.

팝업 이미지 태그는 맞춤 HTML로 생성하는거라 배웠습니다.

저는 html을 엊그저께 알게되었기 때문에, 똑똑이에게 제가 원하는 팝업 이미지 html을 만들어달라고 합니다.

미리 제작해둔 마케터 유형 테스트 링크를 버튼과 연결해달라고도 잊지 않습니다.

똑똑이가 짜준 html

 

4. GTM 트리거 생성

실습 때는 html 태그에 10s타이머 트리거를 설정했지만, 똑똑이가 html 자체에 10s를 넣어놔서 그냥 태그만 생성하면 됐습니다.

덕분에 4번째 단계였던 트리거 생성이 사라졌습니다~

 

5. GTM 태그 미리보기 및 게시

내가..다 해야하나..

게시 옆에 미리보기를 클릭해서 확인해줍니다.

네 들어와서 10초 뒤에 팝업이 떴습니다.

실제로 게시까지 눌러서 티스토리 들어가보니 잘 적용이 됐습니다.  

모바일에서도 잘 뜨더라구요.

 

 

테스는 결과는 ?

 

 

 

멋쟁이사자처럼

쨔잔 -

나는 그로스마케터

 

그런데 이렇게 설정하다보니 홈부터 시작해서 온갖 글에서 팝업창이 뜨길래 글을 못 읽겠더라구요.

굳이 벚꽃글에는 안떴으면 좋겠단 말이죠?

 

다시 서치서치

 

음 일부 제외하는 페이지 트리거를 추가하면 되는구나

트리거는 태그가 발동하기 위한 조건이니, 태그에서 예외트리거로 넣을 제외할 페이지 트리거를 생성하면 된다는 겁니다.

말 장난인가 싶지만 캡쳐보면 이해가 돼요.

 

아무튼 적용해봅시다

제외 트리거 생성 / 예외할 트리거 설정

 

트리거에 제외하고 싶은 url들을 추가하고 만들어줍니다.

다음으로 팝업 링크 태그에 트리거 구성을 클릭하면, [예외]가 있는데 예외항목에 방금 생성한 제외 트리거를 선택합니다.

 

그리고 게시하면...

기본 / 제외 url 화면

짜잔 -

뿌듯합니다.

 

※ 예외 트리거가 아닌 트리거 실행에서 설정해보기 = 실패💥

예외 트리거말고, 트리거 실행에서 제외 기능을 써봤는데 제대로 적용이 안되더라구요.
똑똑이에게 왜 안되는지 쥐잡듯이 물어봐도 모르겠어서 역시 안되는 방법보다 되는 방법을 빠르게 강구하는 게 옳습니다. 

 

*Review

1. 가장 많은 시간을 소모한 곳은 ? 제미나이랑 테스트 결과 이미지 만들기 

2. 가장 혹평을 받은 항목은 ? 테스트 결과 이미지..(속상)

3. 아쉬운 점? 테스트 내용을 다듬고 싶었는데 못한 점

4. 좋았던 점? 트리거의 예외 항목 활용방법을 알게된 점

5. 앞으로 할 일? 제외할 페이지 트리거를 설치했는데, 특정 카테고리 글만 다 제외가 가능한지 알아보기

 

 

*주말맞이 질의응답 내용들 훑어보는데...

강사님이 스크롤뎁스 요소가시성 관련 설명을 주셨다 해봐야겠다..