팝업의 유형

URL이 없는 팝업이란 어떤 것일까요? 팝업에 대한 이해를 돕기 위해 웹 상에서 흔히 볼 수 있는 팝업의 유형에 대해 알아보겠습니다.

1. 브라우저 팝업

브라우저 팝업은 화면의 상단에 노출이 되고 디자인이 일정하다는 특징을 갖고 있습니다. 이 팝업은 페이지가 아닌 브라우저에서 노출이 되기 때문에 기본적으로 구글 태그매니저로 추적이 불가능합니다.

참고. 브라우저 팝업은 이 팝업을 호출하는 코드에 추적코드를 함께 삽입하는 방식으로만 추적이 가능합니다.

URL이 없는 팝업 추적하기_브라우저 팝업

2. URL이 있는 팝업

URL이 있는 팝업은 아래 이미지와 같이 팝업의 상단에 URL이 존재합니다. 최소화, 닫기와 같이 이 팝업을 호출한 페이지와는 독립적으로 제어가 되며, 이는 크기를 조절한 새 창에 다른 페이지를 띄운 것으로 생각하면 됩니다.

이러한 유형의 팝업은 해당 페이지에 추적코드가 설치되어 있으면 기본적으로 데이터를 수집하기 때문에, 별도의 작업이 필요하지 않습니다.

URL이 없는 팝업 추적하기_URL이 있는 팝업

3. URL이 없는 팝업(레이어 팝업)

URL이 없는 팝업은 가장 흔하게 접할 수 있는 팝업이지 않을까 싶습니다. 버튼 클릭, 스크롤다운 등 다양한 상호작용을 통해 노출되는 이러한 팝업들은 사이트에서는 자주 활용되지만 구글 애널리틱스에서는 기본적으로 이를 추적하지 못합니다.

URL이 없는 팝업 추적하기_URL이 없는 팝업

URL이 없는 팝업은 브라우저 팝업보다 디자인이 자유롭고 다양한 기능을 추가할 수 있으며, 새 창에 페이지를 띄우는 URL이 있는 팝업과는 달리 페이지 내에서 코드 형태로 팝업을 띄운다는 차이가 있습니다.

페이지 내에 팝업에 대한 코드가 포함되어 있기 때문에 구글 태그매니저를 통해 이를 추적할 수 있습니다.

팝업의 코드 확인하기

제 사이트에는 팝업을 사용하는 기능이 별도로 존재하지 않으므로, 임시 페이지를 예시로 팝업을 추적하는 방법을 알아보겠습니다.

URL이 없는 팝업 추적하기_팝업 예시 화면

팝업의 코드를 브라우저의 개발자 도구를 사용하여 확인할 수 있습니다. Chrome 브라우저에서 개발자 도구를 실행하는 단축키는 아래와 같습니다.

  • Window : Ctrl + Shift + I 또는 F12
  • Mac : ⌥⌘I ( Alt + Cmd + I )

브라우저 하단에 뜨는 개발자 도구창에서 아래 표시한 버튼(요소 검사 모드)을 클릭하게 되면 페이지 구성 요소를 클릭할 수 있습니다.

URL이 없는 팝업 추적하기_요소 검사 모드 클릭

  • 참고. 요소 검사모드는 아래 방법을 통해서도 바로 실행이 가능합니다.
    Window : Ctril + Shift + C
    Mac : ⌥⌘C ( Alt + Cmd + C )
    버튼을 마우스 우클릭 -> [검사]

요소 검사모드에서 팝업을 클릭하면 아래 개발자 도구 화면에서 팝업의 코드를 확인할 수 있습니다.

URL이 없는 팝업 추적하기_팝업코드 확인

팝업의 요소를 지정하기 위해 id 또는 CSS Selector를 설정해야합니다. 아래 코드에는 요소 지정에 사용할만한 id 값이 없으므로 노란색으로 표시한 class 정보를 활용하여 CSS Selector 구문을 간단하게 작성했습니다.

CSS Selector 구문 -> .modal .modal-content

URL이 없는 팝업 추적하기_팝업코드 CSS 셀렉터

주의사항. 페이지 내에 팝업이 여러개라면 각각의 팝업을 구분할 수 있는 CSS Selector 구문을 작성해야합니다.

요소 공개 상태 트리거 생성하기

구글 태그매니저에서 유형이 [요소 공개 상태]인 트리거를 생성합니다. 이 트리거는 화면에 보이지 않던 요소가 노출됐을 때 실행됩니다.

아래 이미지와 하단의 설명을 참고하여 트리거를 설정합니다.

URL이 없는 팝업 추적하기_요소 공개 트리거

  1. 선택 방법 : 팝업에 고유한 ID가 있을 경우에는 ID를 선택방법으로 사용하나 이번의 경우에는 그렇지 않으므로 CSS 선택 도구를 방법으로 지정합니다.
  2. 요소 선택 도구 : 앞서 확인한 팝업의 요소를 지정하는 CSS Selector 구문을 입력합니다.
  3. 트리거 실행 시점 : 팝업이 페이지에서 1회만 노출되는 구조라면 [페이지당 한 번]을, 여러번 노출될 수 있는 구조라면 [요소가 화면에 표시될 때마다]를 선택합니다.
  4. DOM 변경사항 준수 : 숨겨진 팝업이 보여지는 구조가 아닌, 페이지에 동적으로 팝업 코드가 추가되는 구조의 경우에는 [DOM 변경사항 준수]를 체크합니다. ( 팝업이 보여지기 전에 페이지 내에 팝업 코드를 찾을 수 없는 경우에만 해당 )
  5. 일부 공개 상태 이벤트 : 사이트의 여러 페이지에 팝업이 존재할 수 있으므로 페이지 조건을 추가하는 것을 권장합니다. 또한, 이 조건으로 불필요한 트리거의 실행을 방지할 수 있습니다.

태그 생성하기

트리거가 실행될 때마다 데이터를 전송하기 위한 태그를 생성해야 합니다.

팝업 노출의 경우에는 태그 유형으로 이벤트가 아닌 페이지뷰를 선택하는 경우가 많습니다. 이번 포스트에서는 팝업에 임의의 URL을 부여하여 페이지뷰로 전송하는 방법을 알아보겠습니다.

참고. 이렇게 페이지가 로드되는 시점이 아닌 다른 상호작용에 페이지 뷰로 전송하는 것을 [가상 페이지뷰]라고 합니다. 이는 주로 팝업과 같이 페이지 내의 콘텐츠가 많이 변화하는 경우에 사용합니다.

가상 페이지뷰를 설정하는 방법은 간단합니다. 추적 유형을 페이지뷰로 설정한 다음에 [이 태그의 설정 재정의 사용]을 체크합니다.

그 다음, [기타 설정] – [설정할 입력란]에 location, title을 추가하고 각각에 수동으로 원하는 값을 입력하면 됩니다. 트리거는 앞서 만든 [요소 공개 상태] 트리거를 지정합니다.

URL이 없는 팝업 추적하기_가상 페이지뷰 태그

작업한 내용을 게시하면 팝업이 노출될 때마다 구글 애널리틱스에 페이지뷰로 데이터가 수집되는 것을 확인할 수 있습니다.

URL이 없는 팝업 추적하기_팝업 데이터 확인

guest
29 댓글
오래된 순
최신 순 평가 순
Inline Feedbacks
모든 댓글보기
Ctrl_F_M

너무너무 필요한 기능인데 태그만들기에서 막히네요 ㅠㅠ

저는 GA4를 사용하는데 위 글은 유니버시티 방식이라

GA4방식에서는 태그를 이벤트로 사용하는데 .. 그렇게되면 추적유형과 설정 재정의 사용 이부분이 하는 기능을

대체하는곳을 찾기가 어렵습니다.

빠른시간안에 ga4용 강의가 업데이트 되길 간절히 바래봅니다 ㅠㅠ

Ctrl_F_M

바쁘신 와중에 댓글 너무 감사드립니다.
이런게 재능 기부 아닐까요 ㅠㅠ.
앞으로의 강의글도 기대됩니다!

Ctrl_F_M

page_view 이벤트명으로 태그만들고 맞춤이벤트설정도 해서 시도해봤으나 안되네요 ㅠㅠ

무슨 문제인지는 모르겠습니다.

매개변수값에 변수를 새로 설정해야하는지 기존의 변수에는 맞는게 없어서
어렵습니다 ㅠㅠ 2시간 해맸는데 결국 해결하지 못해 댓글 추가로 남깁니다.

현재 트리거는 잘 작동하는거 같습니다.

스크린샷 2021-10-01 오후 3.17.52.png
마지막 수정 11 월 전 by Ctrl_F_M
Ctrl_F_M

네 ga4로 태그거는거라 페이지뷰가 아닌 이벤트로 설정했고 위 캡쳐사진처럼
매개변수값에 무엇을 넣어야할지 몰라 문의 드렸습니다.
(매개변수에 임의의 url과 제목을 수동으로 입력했으나 검수과정에서 안돼더라고요 ㅠㅠ)

Ctrl_F_M

네 말씀하신대로 수정해서 적용했는데 여전히 태그가 ? 문제인지
모르겠습니다. 팝업창에 확인버튼을 눌러도 되는 방식이라
차라리 버튼을 태깅하는게 나을지도 모르겠네요.

현재상태 사진 첨부합니다.

Ctrl_F_M

검수상태

스크린샷 2021-10-05 오후 1.33.59.png
Ctrl_F_M

사진이 첨부가 안되네요 ㅠㅠ

마지막 수정 11 월 전 by Ctrl_F_M
Ctrl_F_M

사진첨부

스크린샷 2021-10-05 오후 1.34.26.png
Ctrl_F_M

알려주신대로 했는데 .. 아마 트리거 부분이 ? 잘안된거같아요
정확히는 모르겠는데..
팝업창 띄워서 하는부분은 아직 저에겐 어려운 부분인거같아요 ㅜㅠ
다행히 팝업창에 확인버튼을 누르는 구조라서
클릭이벤트 a태깅으로 추적하려고합니다.
나중에 ga4 버전 팝업도 기대할게요!!
그때 자세히 공부하겠습니다.

답변도 성심껏 달아주시고 너무감사합니다. 아마 입문 마케터나 ga입문분들의 바이블이 될 홈피가 될거같아요.

zoey

안녕하세요. 이벤트 태그 생성에 많이 헤메고 있는 1인입니다.. 이 글이 너무 도움이 되네요 ㅠㅠ 궁금한점이 하나있는데 버튼을 클릭해서 팝업창이 생성될 경우 위 방법처럼 팝업창 생성에 태그를 걸지 않고 버튼클릭에 태그를 거는 형태가 더 간단할까요?

zoey

빠른 답변 너무 감사드립니다 ㅠㅠ 버튼클릭은 클릭으로 트리거 생성했습니다.

지금 다시 클릭 없이 노출되는 팝업을 요소공개 상태로 생성 중인데 마지막 태그생성하기 부분이 헷갈립니다ㅠㅠ

  1. 이벤트가 아닌 페이지뷰 방식을 사용해야하나요?
  2. 가상 URL 생성을 꼭 해야지만 가능한것인가요? 그렇다면 URL은 가상으로 아무거나 적으면 되는것인지, 따로 생성 방법이 있는지 궁금합니다!
zoey

감사합니다! 그리고 관리자모드에서 업로드하는 게시글의 첨부파일을 다운 받은 내역을 확인하고 싶은데 이경우에는 ID 혹은 CSS Selector 구문을 확인 할 수가 있나요? 사진을 올리고 싶은데 어떻게 올리는지를 모르겠네요 ㅠㅠ

https://imgur.com/a/OBI5Erm

그리고 혹시 개인강의나 강연은 따로 안하시나요?

마지막 수정 11 월 전 by 표은지
zoey

그럼 각 버튼에 각각 ID나 class명을 넣은 방법 밖에 없을까요? 각 게시물마다 얼마나 다운 받았는지 확인하고싶습니다.

아쉽네요.. ㅜ 이벤트태그에 관한 내용은 Ratel 님처럼 내용 정리가 잘 되있는 곳이 없는거 같아서요

zoey

핫.. 게시글 명칭 가지고 오는 변수,, 사이트에 팁 올려주시길 기다려야겠어요 ㅠㅠ!!

너무 많은 도움이 됬습니다. 감사합니다.

마지막 수정 11 월 전 by 표은지
zoey

Ratel님 죄송하지만 링크확인 한번만 부탁드려도 될까요? 여기에서 슬라이드를 3번 넘기면 팝업이 생서되는 형태인데, 이경우에 위와 같은 방법을 통하면 트리거가 실행되는게 맞을까요? 저 방법대로 계속 해보는데 안되서요 ㅠㅠㅠ

https://b2bzincatalog.com/mobile/trend/?p_url=trend_1_1

zoey

https://imgur.com/a/62I3Ed5

모든 공개 상태 이벤트 << 이건 팝업이 이거 하나라서 그냥 체크해뒀습니다.

표은지

안녕하세요! 팝업 덕분에 태그설정 완료했습니다 감사합니다 🙂