Published on

업데이트된 사용자 행동 데이터 추적 도구 다운로드

Authors
  • avatar
    Name
    Hyo814
    Twitter

개념

1. Google Analytics 4 (GA4)

GA4의 목적

GA4는 웹사이트나 애플리케이션에서 사용자 활동을 추적하고 분석하는 도구입니다. 이를 통해 사용자가 어떤 페이지를 방문했는지, 얼마나 오래 머물렀는지, 어떤 버튼을 클릭했는지 등의 데이터를 수집할 수 있습니다. 이러한 데이터는 마케팅 전략을 세우고 사용자 경험을 개선하는 데 중요한 역할을 합니다.

GA4의 주요 기능

  • 이벤트 기반 데이터 모델: GA4는 페이지뷰 외에도 다양한 사용자 상호작용(이벤트)을 추적할 수 있습니다. 예를 들어, 버튼 클릭, 스크롤, 동영상 재생 등을 추적할 수 있습니다.
  • 크로스 플랫폼 추적: 웹사이트와 모바일 앱에서 발생하는 사용자 활동을 통합하여 분석할 수 있습니다.
  • 사용자 중심 측정: 사용자 식별자를 사용하여 여러 장치에서 동일한 사용자의 활동을 추적할 수 있습니다.
  • 머신러닝 기반 인사이트: GA4는 머신러닝을 사용하여 사용자 행동 예측 및 인사이트를 자동으로 제공할 수 있습니다.

GA4를 설정하여 웹사이트 트래픽을 추적할 수 있습니다.

GA4를 사용하려면 GA4 측정 ID를 얻어야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { GA4React } from 'ga-4-react';

const ga4react = new GA4React('YOUR_GA4_MEASUREMENT_ID');

ga4react.initialize().then(() => {
  ReactDOM.render(<App />, document.getElementById('root'));
}).catch((err) => {
  console.error(err);
});

버튼 클릭, 스크롤, 동영상 재생 추적하기

버튼 클릭 추적

버튼 클릭 이벤트를 추적하려면, gtag.js 라이브러리를 사용하여 이벤트를 수동으로 설정할 수 있습니다.

<button *id*="subscribe-button">Subscribe</button><script>
  document.getElementById('subscribe-button').addEventListener('click', function() {
    gtag('event', 'button_click', {
      'event_category': 'engagement',
      'event_label': 'subscribe_button'
    });
  });
</script>

스크롤 추적

스크롤 이벤트를 추적하려면, gtag.js를 사용하여 특정 스크롤 깊이에 도달했을 때 이벤트를 트리거할 수 있습니다.

<script>
  window.addEventListener('scroll', function() {
    if (window.scrollY > 500) { *// 500px 스크롤 시 이벤트 발생*gtag('event', 'scroll', {
        'event_category': 'engagement',
        'event_label': 'page_scroll'
      });
    }
  });
</script>

동영상 재생 추적

동영상 재생 이벤트를 추적하려면, HTML5 비디오 요소의 이벤트 리스너를 사용하여 추적할 수 있습니다.

<video *id*="promo-video" *controls*><source *src*="promo.mp4" *type*="video/mp4"></video><script>
  document.getElementById('promo-video').addEventListener('play', function() {
    gtag('event', 'video_play', {
      'event_category': 'engagement',
      'event_label': 'promo_video'
    });
  });
</script>

GA4에서 이벤트 확인하기

GA4에서 설정한 이벤트를 확인하려면 다음 단계를 따릅니다.

  1. GA4 속성에 로그인합니다.
  2. 왼쪽 사이드바에서 "Events"를 선택합니다.
  3. 추적된 이벤트 목록과 각 이벤트의 세부 정보를 확인합니다.

2. NEXT.js에서 메타 태그를 사용하여 UTM 링크를 처리하는 방법

UTM(Urchin Tracking Module) 매개변수는 마케팅 캠페인의 효과를 추적하는 데 사용되는 강력한 도구입니다.

UTM 링크

UTM 링크의 목적

UTM(Urchin Tracking Module) 링크는 마케팅 캠페인 효율성을 추적하기 위해 URL에 추가되는 매개변수입니다. 이를 통해 특정 링크를 통해 들어오는 트래픽의 출처, 매체, 캠페인 이름 등을 추적할 수 있습니다. UTM 링크를 사용하면 어떤 마케팅 활동이 효과적인지 쉽게 분석할 수 있습니다.

UTM 링크의 주요 매개변수

  • utm_source: 트래픽의 출처를 나타냅니다. 예: utm_source=google
  • utm_medium: 트래픽의 매체를 나타냅니다. 예: utm_medium=cpc
  • utm_campaign: 캠페인 이름을 나타냅니다. 예: utm_campaign=spring_sale
  • utm_term: 유료 검색 캠페인에서 사용되는 키워드를 나타냅니다. 예: utm_term=running+shoes
  • utm_content: 동일한 광고의 다른 콘텐츠를 구분할 때 사용합니다. 예: utm_content=logolink

페이지에 링크에 UTM 매개변수 추가하기

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Page</h1>
      <Link href="/about?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale">
        <a>About Us</a>
      </Link>
    </div>
  );
}

메타 태그에 UTM 매개변수 추가하기

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="My page description" />
        <meta property="og:url" content="https://www.example.com?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale" />
        <meta property="og:title" content="My Page Title" />
        <meta property="og:description" content="My page description" />
        <meta property="og:type" content="website" />
      </Head>
      <h1>Welcome to My Page</h1>
      <p>This is the content of the page.</p>
    </div>
  );
}

3. Facebook Pixel

Facebook Pixel은 웹사이트 방문자의 행동을 추적하여 Facebook 광고의 효과를 측정하고, 타겟 광고를 최적화하는 데 사용됩니다.

예시

  • 사용자가 특정 제품을 보고 페이지를 떠난 후에도 관련 광고를 페이스북 피드에 표시합니다.

활용 방법

  • 리타게팅 광고를 생성하여 전환율을 높일 수 있습니다.
  • 고객의 행동 패턴을 분석하여 효율적인 광고 전략을 수립할 수 있습니다.

4. Hotjar

Hotjar는 사용자가 웹사이트에서 어떻게 상호작용하는지 시각적으로 보여주는 도구입니다. 히트맵, 세션 녹화 등을 통해 사용자 경험을 분석할 수 있습니다.

예시

  • 웹사이트의 어느 부분이 가장 많이 클릭되는지 히트맵으로 확인할 수 있습니다.

활용 방법

  • 사용자의 클릭, 스크롤, 탭 등을 분석하여 웹사이트의 사용성을 개선할 수 있습니다.

🔗레퍼런스

참고 강의/글

  1. Google Analytics 4 (GA4) Documentation: Introduction to Google Analytics 4
  2. Google Analytics Measurement Protocol: GA4 Measurement Protocol
  3. UTM Parameters Documentation: Campaign URL Builder
  4. Facebook Pixel Documentation: Facebook Pixel Setup
  5. Hotjar Documentation Overview: Hotjar Help Center
  6. How to Use Hotjar: How to Hotjar