구글 태그매니저를 활용한 Iframe 폼 제출 이벤트 추적 방법

안녕하세요. 그로스마케팅 파트너 허들러스의 박희진 그로스 엔지니어입니다.

사이트에서 iframe을 사용하면 구글 태그 매니저를 통한 추적이 복잡해집니다. 이로 인해 캠페인 추적, 이탈률 정확성, 세션 관리 등의 어려움이 발생하며, 데이터 수집의 어려움을 겪을 수 있습니다. 특히 다른 도메인이나 서브도메인에서 호스팅되는 경우에는 더욱 어려울 수 있는데요. 이번글에서는 그 어려움들을 해결하고자, 구글 태그매니저를 통해 Iframe과 통신을 설정하고 GA4로 데이터를 보내는 방법을 소개드리겠습니다.

iframe 이란?

<iframe>은 원래 웹 페이지 내에서 다른 HTML 문서를 포함하여 두 개의 웹 페이지를 동시에 표시할 때 사용됩니다. 예를 들어, 쇼핑몰에서 제품 리뷰 창이 현재 보고 있는 페이지 위에 나타날 때 사용됩니다. 이를 통해 두 개의 웹 페이지를 함께 볼 수 있으며, <iframe>은 별도의 웹페이지로 간주되며 다른 URI와 HTML 문서를 가집니다.

<iframe> 코드는 이렇게 생겼습니다.

이 <Iframe> 코드는 현재 웹 페이지인 “http://team-hurdlers.store” 에 다른 웹 페이지인 “http://example.team-hurdlers.store”를 포함시킵니다.

<Iframe> 태그를 사용함으로써 “문의하기” 레이아웃을 기존 레이아웃과 충돌없이 웹 사이트 여러 곳에 쉽게 배치할 수 있습니다. 또한 “문의하기” 페이지의 내용이나 디자인을 변경할 때, 한번의 업데이트로 모든 레이아웃을 수정 할 수 있습니다. 이로써 유지 보수가 효율적이고 간편해집니다.

이러한 이유로 웹 사이트의 일부를 분리하고 재사용 가능한 콘텐츠를 효율적으로 관리하고, 일관성을 유지하기 위해서 <Iframe> 태그를 사용합니다.

그러나 <Iframe> 태그를 사용하면 데이터 추적이 기존 웹 사이트에서 추적하는 것보다 어려워지는데요. 왜 그런지 자세히 살펴보겠습니다.

Iframe 에서 데이터 추적이 어려운 이유 ?

예시 iframe의 구조

설명하기 앞서 예시 <Iframe>의 구조 먼저 보겠습니다.

• 메인페이지 url : http://team-hurdlers.store/culture
• iframe의 src : http://example.team-hurdlers.store/test

메인페이지에 Google Tag Manager 를 삽입했고, 새로운 웹 페이지 ( 문의하기 레이아웃 ) 를 메인 페이지에 포함 시켰습니다.

이제 우리가 원하는것은, <Iframe> 페이지에서 문의하기 버튼 클릭 시, Google Tag Manager가 데이터를 수집하고,이를 GA4로 전송하여 이벤트를 기록하고 싶습니다.

문의하기 버튼 클릭 시 contact 이벤트 태그 실행하기

1) ‘contact’ 라는 이벤트 태그를 실행하기 위해서 <Iframe>의 문의하기 버튼을 클릭 트리거로 생성합니다.

2) ‘contact’ 라는 이벤트 태그를 만들고 생성한 클릭 트리거를 넣어줍니다.

3) GA4 Debug View 에서 이벤트 태그가 실행되지 않는 문제가 발생하였는데요. 이는 곧 위에서 생성한 트리거가 작동하지 않는 것을 의미합니다.

왜 트리거가 발생하지 않았을까?

<iframe> 코드 내에서 포함된 새로운 웹 페이지는 기존 메인 페이지와는 완전히 독립적인 HTML 문서입니다. 즉, 메인 페이지의 HTML 코드에는 이 새로운 웹 페이지의 내용에 대한 정보가 없습니다.

구글 태그 매니저는 현재 페이지의 DOM(Document Object Model) 구조를 기반으로 작동하며 이벤트를 추적합니다. 그러나 <iframe> 내부의 웹 페이지는 메인 페이지와 별개의 DOM을 가지고 있으며, 메인 페이지의 DOM에는 해당 웹 페이지의 요소가 포함되어 있지 않습니다.

이로 인해 메인 페이지의 HTML 코드에서는 "문의하기" 버튼 요소 또는 관련 이벤트에 대한 정보가 없기 때문에 설정해놓은 트리거가 작동하지 않습니다.

그렇기 때문에 <iframe>내에서 문의하기 버튼을 클릭한 시점에 입력한 데이터를 메인페이지로 전송을 해야 합니다.

구글 태그 매니저는 현재 페이지의 DOM을 기반으로 이벤트 추적을 수행하기 때문에, <iframe> 내부의 별개의 웹 페이지에서 이벤트를 추적하려면 추가적인 설정과 통신 메커니즘을 구현해야 합니다. 일반적으로는 <iframe>과 메인 페이지 간의 통신을 설정하고, 이벤트가 발생할 때 <iframe> 내부에서 이를 감지하여 구글 태그 매니저에 데이터를 전달해야 합니다. 이렇게 하면 메인 페이지에서도 이벤트 태그가 작동할 수 있게 됩니다.

해결방법

window.postMessage

일반적으로 스크립트는 동일 출처 정책에 의해, 프로토콜, 도메인, 포트 중 어느 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없습니다. 하지만, window.postMessage()를 사용하면 안전하게 origin이 다른 윈도우와 통신할 수 있습니다.

Postmessage 는 브라우저 간에 메시지를 안전하게 전송하는데 사용되는 웹 API 입니다. PostMessage 를 사용하면 다른 윈도우나 프레임으로 메시지를 보낼 수 있습니다. 이것은 일반적으로 Cross-Origin Communication( 다른 출처 간 통신 ) 을 구현 할 때 사용됩니다.

window.postMessage()를 쓰지 않고 데이터를 전송한다면?

서로 다른 url 구조에서 데이터 송수신을 하는 데 있어서 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 에러가 발생합니다.

CORS 정책? 서로 다른 url 구조에서 데이터 송수신할 때, 보안 공격을 방지하고 사용자의 개인 정보를 보호하기 위한 것입니다.

window.postMessage()는 다른 출처 간 통신(CORS)을 가능하게 하는 메서드로, 데이터가 안전하게 교환되고 브라우저의 보안을 유지할 수 있습니다.

1. Iframe 에서 부모창으로 데이터 전송하기

window.postMessage()를 통해 다른 window에 MessageEvent를 전송할 수 있습니다.
window.postMessage()를 사용할 때, window의 대상을 정해야 합니다. 
<iframe>코드를 삽입한 페이지를 부모창이라고 하겠습니다.
<iframe>에서 부모창에 메시지를 보낼 때 window.parent를 사용하고, 부모창이 <iframe>에 메시지를 보낼 때 HTMLIFrameElement.contentWindow 를 사용하면 됩니다.
window.parent.postMessage() 를 이용하면 <Iframe>에서 부모창으로 데이터를 안전하게 전송할 수 있습니다.

아래는 window.parent.postMessage()를 사용하는 예시 코드입니다. postMessage 메서드 내부에는 객체 형태의 메세지와 메시지를 전송받을 대상의 도메인이 들어갑니다.

2. 부모창에서 Iframe 에서 전송한 데이터 받아오기

이제 데이터 전송까지 완료했습니다!
아직 끝난 것이 아닙니다. <Iframe>에서 전달된 메세지를 부모창으로 받아와야 합니다.
디스페치 이벤트(The dispatched event)를 사용하면 다른 window에서 전달된 메세지를 받을 수 있습니다.
아래는 디스페치 이벤트를 사용하는 예시 코드입니다.
addEventListener 를 사용해 postMessage로 전송된 데이터를 받기위한 이벤트 리스너를 설정해주고, 그 안에 이벤트 핸들러 함수 receiveMessage 를 넣어줍니다. 그러면 event.data에는 <Iframe>에서 받아온 데이터가 객체형태로 저장되어 있습니다.

<Iframe> 에서 문의하기 버튼 클릭 시, 위에서 생성한 함수를 통해 데이터가 정상적으로 잘 전달되는것을 확인 할 수 있습니다.

3. 이벤트 추적하기

이제 구글 태그매니저에 맞춤이벤트 트리거를 생성하여, 전달 받은 데이터로 이벤트 태그가 실행되도록 해보겠습니다.

1) 맞춤이벤트 설정

2) dataLayer 내부에 들어간 데이터와 함께 전달하기 위해 구글 태그매니저에서 각 변수 생성 후 GA4 이벤트 태그에 매개변수로 등록합니다.

3) iframe에서 문의하기 폼 제출 버튼 클릭

4) GA4 debug view에서 contact 이벤트 추적되었고 이벤트 파라미터 값도 잘 들어온 걸 확인할 수 있습니다.

이렇게 간단하게 부모창과 <Iframe>요소에 각 코드를 적절히 삽입해준다면 쉽게 데이터를 받아와서 처리할 수 있습니다.
<Iframe>내에 또 <Iframe>이 이중으로 있는 구조더라도 부모창으로 데이터를 전송하는 코드와 부모창에서 전달된 데이터를 받는 코드만 구현한다면 아무리 많은 <Iframe>이 있더라도 이벤트를 잡아내는 것이 가능합니다.
이후 2편 에선 <Iframe> 폼 제출 이벤트를 추적하는 2번째 방법으로 GA4 서버로 post 요청하는 방식인 측정 프로토콜에 대해 설명드리겠습니다.
허들러스 개발팀에서는 GTM을 활용하여 다양한 환경에서 다양한 이벤트를 구현하고 있습니다.
추후에 추가되는 내용이 있다면 다시 안내 드리겠습니다. GA4 도입이나 마이그레이션에 대한 도움이 필요하신 분들은 데이터 전문 그로스마케팅 파트너, 허들러스에 편하게 연락 주세요.
긴 글 읽어 주셔서 감사합니다.

요약

• - 웹사이트에서 <Iframe> 사용 시 구글 태그 매니저를 통한 이벤트 추적이 복잡해집니다.
• - 왜냐하면 메인페이지 내에 <Iframe>은 별도의 웹페이지로 취급되어, 동일 출처 정책에 따라 다른 출처간 데이터 전송이 어렵기 때문입니다. 따라서 구글 태그 매니저는 <Iframe> 내의 이벤트를 감지하기 어렵습니다.
• - 해결방법으로 <Iframe> 내에서 발생한 이벤트 데이터를 window.postMessage를 활용하여 다른 출처간 통신에도 안전하게 데이터를 메인페이지로 전송하게 되면, 그 데이터를 구글 태그 매니저로 쉽게 추적할 수 있습니다.