제목
웹앱 GTM을 통한 버튼 클릭 데이터 수집은 어떻게 해야하나요?
작성자
허샘
작성일
2023-03-29 12:11
조회
1572
답변완료
안녕하세요!

다차타에 와서 GA와 GTM의 정보를 너무 많이 배우고 있는 서비스기획자 새내기 입니다. 

UX개선을 위해 데이터가 필요했고 현재 버튼 클릭율로 데이터를 측정하려고 합니다. 

저희는 웹과 웹앱 2가지로 서비스 하고 있습니다.

웹페이지의 경우,  버튼 클릭 데이터 파악을 위해 GTM을 통해 GA4로 데이터를 받고 있습니다.
웹앱의 버튼도 데이터를 파악 해야 하는데, 어떻게 해야할 지 잘 모르겠습니다.

파이어 베이스 등 검색하면 나오는 용어들을 찾아보긴 했는데 너무 어려워서 이해가 잘 안되고,  웹앱은 해당되지 않는 것 같기도 해서요.

내부에 개발자가 있지만, 데이터 측정 관련해서는 지식있는 분이 없습니다.

 

정리: 웹앱의 버튼 클릭율 데이터 측정을 위해 무엇을 어떻게 해야할지 궁금합니다!

감사합니다! 
전체 5
  • 2023-03-29 23:43

    안녕하세요, 허샘님!
    웹앱의 경우에는 ㅎㅎ 구축 난이도가 매우 어려운 편인데요. 웹과 앱에 대한 어느 정도에 개념이 있어야 수월하게 구축이 가능합니다.

    먼저, 앱 개발자는 앱에 파이어베이스를 설치하고, 웹페이지를 띄우는 Webview에 네이티브 인터페이스를 구현해야 합니다.
    그리고 웹 개발자(또는 GTM 담당자)는 자바스크립트 핸들러를 웹 상에 구현해야 합니다.
    - 참고. https://firebase.google.com/docs/analytics/webview?hl=ko

    위 두 작업이 완료되면 웹에서 발생한 이벤트 정보를, 자바스크립트 핸들러의 함수를 통해 앱으로 전달하고, 앱에서는 전달받은 정보를 Firebase를 통해 GA4로 이벤트 전송해주게 됩니다.
    ( 이러한 과정을 하는 이유는 웹과 앱의 사용자 식별자를 통일하여, 앱과 웹의 이벤트를 연결시키기 위함입니다. )

    앞서 설명드린 작업들이 문제없이 진행됐다면,
    웹 버튼의 경우에는 클릭되면 웹에서는 자바스크립트 핸들러 구현시 선언한 logEvent() 함수에 이벤트 정보를 파라미터로 넣어서 호출시키기만 하면 됩니다.
    앱 영역(Native)의 버튼의 경우에는 앱 개발자가 Firebase 이벤트 전송 코드로 바로 데이터를 전송하면 되구요.
    ( 데이터 중복을 방지하기 위해서는 기존에 작업한 내용이 App에서는 전송하지 않도록 분기처리를 해주셔야 합니다. )

    자세히 설명하기에는 다뤄야할 내용이 많다보니, 개념만 잡으실 수 있도록 핵심만 간단하게 설명드렸습니다 🙂
    참고로 제가 설명드린 내용의 대부분은 Firebase 개발자 문서에 정리되어 있습니다.
    제가 설명드린 내용과 아래 공유드린 링크를 참고하시면, 개발 지식이 있으신 분이라면 어렵지 않게 구현하실 수 있을 것으로 예상됩니다!
    - 파이어베이스 설치 : https://firebase.google.com/docs/analytics/get-started?hl=ko
    - 예시 프로젝트(웹앱) : https://github.com/FirebaseExtended/analytics-webview

    • 2023-04-14 15:05

      안녕하세요!
      데이터 중복을 방지하기 위해 APP 에서는 전송되지않도록 분기처리가 필요하다고 하는데,
      해당 작업이 어떤것인지 알 수 있을까요ㅜㅜ!

      또한 아래 질문과 같이 GTM에서 자바스크립트 핸들러 구현이 가능한지 모르겠네요..!!

      • 2023-04-14 22:04

        페이지가 Webview에서 떴는지, 앱 브라우저에서 떴는지를 식별하는 값이 저장되는 GTM의 변수로 만드시고
        이를 트리거 조건으로 활용하여, 웹 태그와 네이티브 전송을 위한 태그를 각각 설정하시면 됩니다.

        웹 태그는 일반적인 GA4 템플릿을 사용하면 되고, 앱 브라우저에서는 해당 태그가 실행되어야 합니다.
        네이티브 전송을 위한 태그는 인앱에서 페이지가 뜰 경우 실행되면 되구요!

        아쉽지만 하이브리드 앱 구축은 GTM을 떠나서 하이브리드 앱 환경에 대한 이해가 있어야 구현이 가능한 부분이라.. GTM 보다는 가급적이면 개발자의 도움으로 해결하시는 것을 추천드려요 🙂

        GTM으로 문의주신 내용을 구현하는 것은 그 다음 단계로 볼 수 있을 정도로, GTM에 대한 숙련도도 필요하기 때문에 더 구현이 복잡할 수 있습니다.

  • 2023-04-06 08:54

    저희도 하이브리드 앱이라 GTM 적용에 애를 먹고 있습니다. 책이나 인터넷에 나온 설명들은 대부분 웹만 기준으로 하고 있는 경우가 많아서 그대로 따라해도 잘 적용이 안되는 거 같구요. ㅜㅜ GTM이 개발자의 도움이 '거의' 없이 태깅작업을 할 수 있다고 해서 시도한 건데.... 어디까지 개발자가 해야하는 영역인지 좀 모호합니다. Ratel님이 설명해주신 걸 보면 자바스크립트 핸들러를 웹개발자나 GTM 담당자가 구현해야 한다고 되어 있는데 GTM에서 자바스크립트 핸들러를 구현할 수 있는 방법이 있는 건가요? 개발자가 아니라 Firebase 문서를 읽어봐도 도통 잘 모르겠네요 ^^;;

    • 2023-04-14 21:47

      안녕하세요, UX team님
      맞습니다.. 하이브리드 앱 구축이 웹 뿐만 아니라 앱에 대한 지식도 있어야 정확히 구축이 가능하기 때문에 쉽지 않습니다;
      웹의 경우에는 GTM 설치 코드를 페이지에 심어주거나, GTM이 활용할 정보들을 스크립트로 dataLayer에 넣어주는 작업이 일반적인 개발자분들의 영역입니다.

      보통은 GTM을 깊게 활용을 안하기 때문에, 설치 코드까지만 넣고 dataLayer는 활용을 잘 하지않는 경우도 많긴하죠.. ㅎㅎ
      그 외 GTM에서 제공하는 트리거를 활용하여 클릭, 페이지 조회, 스크롤, 노출 등의 이벤트들은 개발자의 도움없이 태깅 작업이 가능합니다.

      정리드리자면 "웹"에서는 어느 정도 작업 기반을 마련하기 위해 개발자의 도움이 최초에만 필요하고, 그 이후의 태깅 작업은 개발자의 도움이 거의 없습니다.

      하이브리드 앱의 경우에는 자바스크립트 인터페이스를 구현하기 위해 앱 개발자의 코드 작업(IOS, AOS)이 필요하구요. GTM에서는 맞춤 HTML 태그를 활용하여 자바스크립트 인터페이스의 웹쪽 스크립트 작업을 전부할 수 있습니다. 맞춤 HTML 태그를 사용하는건 GTM 안에서 개발을 하는 것과 마찬가지이기 떄문에, 사실상 GTM에 대한 숙련도와 웹에 대한 이해도가 없이는 작업이 불가능할 것으로 보입니다. 따라서, 하이브리드 앱을 구축해야 하는 상황이면 가급적이면 GTM의 활용을 줄이시고 개발자의 코드 작업을 위주로 태깅을 진행하시는 것을 추천드립니다.

      태그 관리툴은 분명 개발의 도움없이도 많은 것들을 할 수 있는 도구지만, 결국 개발 지식이 있어야 하이브리드 앱 구축과 같은 상황에서 제대로 활용이 가능합니다.

« GA4 수동 UTM 이 잡히지 않습니다
메타 픽셀 관련하여 도움이 시급합니다... »
목록보기