안녕하세요! 그로스마케팅 파트너 허들러스의 박희진 그로스 엔지니어입니다.
이 글에서는 Iframe을 사용할 때 발생할 수 있는 구글 태그 매니저와 관련된 어려움에 대해 이야기하고, 이를 해결하기 위한 방법을 소개합니다. Iframe을 사용하면 구글 태그 매니저를 통한 추적 작업이 복잡해지며, 이로 인해 캠페인 추적, 이탈률 정확성, 세션 관리 등의 데이터 수집에 어려움이 생길 수 있습니다. 특히 다른 도메인이나 서브 도메인에서 호스팅 되는 경우에는 더 복잡해질 수 있습니다.
이러한 어려움을 극복하고자 구글 태그 매니저를 통해 Iframe과 통신을 설정하고 GA4로 데이터를 전송하는 방법에 대해 설명하겠습니다. 이를 통해 더욱 효과적인 데이터 수집과 추적을 할 수 있게 됩니다.
iframe 이란?
iframe은 웹 페이지 내에서 다른 HTML 문서를 포함하여 두 개의 웹 페이지를 동시에 표시하는 데 사용됩니다. 이것은 쇼핑몰에서 제품 리뷰 창이 현재 보고 있는 페이지 위에 나타날 때 사용됩니다. 이렇게 하면 두 개의 웹 페이지를 함께 볼 수 있으며, iframe은 별도의 웹 페이지로 간주되며 다른 URI와 HTML 문서를 가집니다.
아래는 iframe 코드의 예시입니다.
위의 코드는 현재 웹 페이지인 "http://team-hurdlers.store"에 다른 웹 페이지인 "http://example.team-hurdlers.store"를 포함시킵니다.
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로 전송하여 이벤트를 기록하는 것입니다.
그러나 iframe에서 데이터 추적이 어려운 이유는 다음과 같습니다:
동일 출처 정책(Same-Origin Policy): 브라우저는 보안을 위해 동일 출처 정책을 적용합니다. 이는 원래 웹 페이지와 iframe의 원본이 동일해야만 데이터를 공유할 수 있다는 것을 의미합니다. 다른 출처에서 호스팅 되는 iframe에서 이벤트를 추적하려면 보안 문제로 인해 제약이 따릅니다.
크로스 도메인 추적(Cross-Domain Tracking): iframe 내에서 다른 도메인의 데이터를 추적하려면 추가 설정과 구현이 필요합니다. 이는 복잡하며, 원본 페이지와 iframe 간의 통신 문제로 어려울 수 있습니다.
데이터 손실 가능성: iframe 내에서 데이터를 추적하면 데이터의 일부가 누락될 수 있으며, 이로 인해 정확한 분석이 어려울 수 있습니다.
이러한 이유로 iframe에서 데이터 추적을 원활하게 수행하기 위해서는 동일 출처 정책과 크로스 도메인 추적에 대한 고려와 추가적인 설정이 필요합니다. 이를 통해 데이터 수집과 분석을 더욱 효과적으로 수행할 수 있을 것입니다.
문의하기 버튼을 클릭하여 'contact' 이벤트 태그를 실행하는 방법에 대해서도 알아보겠습니다.
문의하기 버튼 클릭 시 'contact' 이벤트 태그 실행하는 방법
클릭 트리거 생성: 먼저, <iframe> 내의 문의하기 버튼을 클릭할 때 'contact' 이벤트 태그를 실행하기 위한 클릭 트리거를 생성합니다.
이벤트 태그 생성: 'contact'라는 이름의 이벤트 태그를 만들어서 앞서 생성한 클릭 트리거를 연결합니다. 이렇게 하면 문의하기 버튼을 클릭할 때 'contact' 이벤트 태그가 실행됩니다.
그러나 GA4 Debug View에서 이벤트 태그가 실행되지 않는 문제가 발생할 수 있습니다. 이 문제는 위에서 생성한 클릭 트리거가 작동하지 않을 때 나타납니다. 이 문제를 해결하기 위해서는 클릭 트리거 및 이벤트 태그 설정을 다시 검토하고 문제를 해결해야 합니다.
왜 트리거가 발생하지 않았을까요?
1. <iframe> 코드 내의 독립성:
<iframe>에 포함된 새로운 웹 페이지는 메인 페이지와 완전히 독립적인 HTML 문서입니다. 이것은 메인 페이지의 HTML 코드에는 새로운 웹 페이지의 내용에 대한 정보가 없다는 것을 의미합니다. 구글 태그 매니저는 현재 페이지의 DOM(Document Object Model) 구조를 기반으로 작동하며 이벤트를 추적하는데, <iframe> 내의 웹 페이지는 메인 페이지와 별개의 DOM을 가지고 있어 메인 페이지의 DOM에는 해당 웹 페이지의 요소가 포함되어 있지 않습니다.
해결 방법은 <iframe> 내의 웹 페이지와 메인 페이지 간에 데이터를 공유하고, 이벤트를 추적할 수 있는 방법을 마련하는 것입니다.
2. 데이터 통신 부재:
<iframe> 내부의 웹 페이지와 메인 페이지 간에 데이터 통신 메커니즘이 부재 하면, 이벤트 정보를 메인 페이지로 전달할 방법이 없습니다. 구글 태그 매니저는 이벤트를 감지하고 추적하기 위해 필요한 정보를 현재 페이지의 DOM에서 찾아야 하는데, <iframe>에서 발생한 이벤트 정보를 메인 페이지로 전송하지 않으면 해당 정보를 인식할 수 없습니다.
해결 방법은 <iframe>과 메인 페이지 간의 통신을 설정하고, 이벤트가 발생할 때 <iframe> 내부에서 이를 감지하여 구글 태그 매니저에 데이터를 전달하는 방법을 채택하는 것입니다.
이러한 이유로 <iframe> 내부에서 발생한 이벤트를 메인 페이지에서 추적하기 위해서는 추가적인 설정과 통신 메커니즘을 구현해야 합니다. 이렇게 하면 메인 페이지에서도 이벤트 트리거가 작동할 수 있게 됩니다.
window.postMessage 사용을 통한 문제 해결
보통 스크립트는 동일 출처 정책(Same-Origin Policy)에 따라 프로토콜, 도메인, 포트 중 하나라도 다르면 다른 윈도우와 통신할 수 없습니다. 그러나 window.postMessage()를 사용하면 안전하게 origin이 다른 윈도우와 통신할 수 있습니다.
window.postMessage()는 브라우저 간에 메시지를 안전하게 전송하기 위한 웹 API입니다. 이 메서드를 활용하면 다른 윈도우나 프레임으로 안전하게 메시지를 보낼 수 있으며, 이는 주로 서로 다른 출처 간 통신(Cross-Origin Communication)을 구현하는 데 사용됩니다.
이 방법을 사용하면 동일 출처 정책의 제약을 극복하고, 다른 출처의 윈도우와 안전하게 데이터를 교환하고 통신할 수 있습니다. 이것은 웹 애플리케이션에서 다양한 출처로부터 정보를 수집하거나 서로 다른 도메인 간의 연동을 구현하는 데 유용합니다.
window.postMessage()를 사용하지 않고 데이터를 전송하려면?
window.postMessage()를 사용하지 않고 데이터를 전송하는 경우, CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 에러가 발생할 수 있습니다. 이러한 에러는 보안과 개인 정보 보호를 위한 CORS 정책에 의해 발생합니다. CORS 정책은 서로 다른 출처(origin) 간의 데이터 송수신을 제어하고 보안 공격을 방지하기 위한 중요한 정책입니다.
CORS 정책은 웹 애플리케이션의 보안을 강화하고 사용자의 개인 정보를 보호하기 위해 동작합니다. 이 정책은 서로 다른 출처 간의 통신을 허용하거나 제한하는 방식으로 작동합니다. 서로 다른 출처에서 데이터를 요청하고 응답받을 때, 브라우저는 요청을 보내는 출처와 응답을 주는 출처를 비교하고 CORS 정책을 적용합니다.
window.postMessage()는 이러한 CORS 정책을 우회하고 다른 출처 간의 통신을 가능하게 하는 메서드로, 데이터를 안전하게 교환하고 브라우저의 보안을 유지할 수 있도록 도와줍니다. 이를 통해 서로 다른 출처의 웹 페이지 간에 안전하게 데이터를 전송하고 공유할 수 있습니다.
결론적으로, window.postMessage()는 CORS 에러를 피하고 데이터를 안전하게 전송하기 위한 필수적인 도구 중 하나로 사용됩니다. 이를 통해 웹 애플리케이션은 보안과 개인 정보 보호를 유지하면서 다양한 출처 간의 통신을 가능하게 할 수 있습니다.
1. Iframe 에서 부모창으로 데이터 전송하기
window.postMessage()를 활용한 데이터 전송:
window.postMessage() 메서드를 사용하면 Iframe에서 다른 창(window)으로 MessageEvent를 안전하게 전송할 수 있습니다. window.postMessage()를 사용할 때는 전송 대상 window를 명시해야 합니다. 이 예시에서는 Iframe을 부모 창으로 가정하겠습니다.
Iframe에서 부모 창으로 메시지를 전송하려면 window.parent를 사용하고, 부모 창에서 Iframe으로 메시지를 보내려면 HTMLIFrameElement.contentWindow를 사용합니다. 이렇게 하면 Iframe에서 부모 창으로 데이터를 안전하게 전송할 수 있습니다.
아래는 window.parent.postMessage()를 사용하는 예시 코드입니다. postMessage 메서드내부에는 객체 형태의 메세지와 메시지를 전송받을 대상의 도메인이 들어갑니다.
2. 부모창에서 Iframe 에서 전송한 데이터 받아오기
이제 데이터 전송 단계를 완료했습니다! 하지만 아직 끝이 아닙니다. 이제는 <Iframe>에서 전달된 데이터를 부모 창에서 받아와야 합니다. 이를 위해 디스패치 이벤트(The dispatched event)를 사용하여 다른 창에서 전송된 메시지를 수신할 수 있습니다. 아래는 디스패치 이벤트를 활용한 예시 코드입니다.
addEventListener를 사용하여 postMessage로 전송된 데이터를 수신하기 위한 이벤트 리스너를 설정하고, 그 안에 이벤트 핸들러 함수인 receiveMessage를 포함시킵니다. 이렇게 하면 event.data에는 <Iframe>에서 받아온 데이터가 객체 형태로 저장되어 있습니다.
<Iframe>에서 "문의하기" 버튼을 클릭할 때, 위에서 생성한 함수를 통해 데이터가 정상적으로 전달되는 것을 확인할 수 있습니다.
3. 이벤트 추적하기
이제 구글 태그 매니저를 활용하여 맞춤 이벤트를 생성하고, 전달 받은 데이터를 기반으로 이벤트 추적을 설정하는 방법에 대해 알아보겠습니다.
1) 맞춤 이벤트 설정: 먼저 구글 태그 매니저를 사용하여 맞춤 이벤트 트리거를 생성합니다. 이를 통해 원하는 이벤트를 추적할 수 있습니다.
2) 데이터를 Data Layer에 추가:
데이터를 수신한 후, 이를 Data Layer에 추가합니다. 그 다음, 구글 태그 매니저에서 해당 변수를 생성하고 GA4 이벤트 태그에 매개변수로 할당합니다.
3) 문의하기 폼 제출 이벤트 발생:<Iframe> 내에서 문의하기 폼 제출 버튼을 클릭하면 이벤트가 발생합니다.
.
4) 이벤트 추적 확인:
GA4 디버그 뷰를 통해 "contact" 이벤트가 추적 되고, 이벤트 파라미터 값이 정상적으로 전달되었음을 확인할 수 있습니다.
이렇게 설정하면 부모 창과 <Iframe> 요소 사이에 데이터를 수신하고 처리할 수 있습니다. 여러 개의 중첩된 <Iframe>이 있는 경우에도, 부모 창으로 데이터를 전송하고 수신하는 코드를 구현하면 여러 이벤트를 쉽게 추적할 수 있습니다.
다음 글에서는 <Iframe> 폼 제출 이벤트를 추적하는 다른 방법인 측정 프로토콜에 대해 설명하겠습니다. 허들러스 개발팀은 GTM을 활용하여 다양한 환경에서 다양한 이벤트를 구현하고 있으며, GA4 도입 또는 마이그레이션에 관심이 있는 분들은 데이터 전문 그로스 마케팅 파트너인 허들러스에 언제든 연락 주시면 도움을 드리겠습니다.
긴 글, 읽어주셔서 감사합니다.
요약
웹사이트에서 <Iframe>을 사용하면 구글 태그 매니저를 통한 이벤트 추적이 복잡해집니다. 이는 <Iframe>이 별도의 웹페이지로 취급되어, 동일 출처 정책으로 인해 다른 출처 간 데이터 전송이 어렵기 때문입니다.
<Iframe> 내에서 발생한 이벤트 데이터를 window.postMessage를 활용하여 다른 출처 간 안전하게 메인페이지로 전송하면, 구글 태그 매니저로 이를 쉽게 추적할 수 있습니다.
window.postMessage를 사용한 데이터 전송은 CORS 정책을 우회하고 서로 다른 출처 간에 안전하게 데이터를 공유할 수 있는 메커니즘을 제공합니다.
