현재 노트: KR-110.20
하위 분류:

• KR-110.20 a Google Analytics API 구현 및 임베드 코드를 위한 Looker Studio사용과 UI를 위한 추가 업데이트

#개인프로젝트 #Google_Analytics

프로젝트 기획

기획

기존 Google Analytics를 활용하여 API 사용한 결과값 필터링 후, 사용하기 편하게 임베드 모듈형태로 사용하기로 기획

기획 근거

• 기존 Google Analytics를 사용하고 있음으로 쿼리 하는 API를 배우기만 하면 될 것
• 임베딩 코드를 제공하는 기능도 Google Analytics에서 제공할 것이라 예산

운영중인 블로그의 방문자 수를 늘리기 위해 인기 글 5개를 보여주는 서비스를 추가하고 싶어서 해당 프로젝트를 시작해봅니다.

기획

기존 Google Analytics를 활용하여 API 사용한 결과값 필터링 후, 사용하기 편하게 임베드 모듈형태로 사용하기로 기획

기획 근거

• 기존 Google Analytics를 사용하고 있음으로 쿼리 하는 API를 배우기만 하면 될 것
• 임베딩 코드를 제공하는 기능도 Google Analytics에서 제공할 것이라 예산

아키텍쳐

flowchart TD

    subgraph Blog["Blog Website"]

        A1[Tracking Code]

        A2[Embedded Popular Posts]

    end

  

    subgraph Analytics["Google Analytics"]

        B1[Data Collection]

        B2[GA4 Database]

    end

  
  
  

    subgraph Visualization["Looker Studio"]

        D1[Data Visualization]

        D2[Embed Code Generator]

    end

  

    A1 -->|User Activity| B1

    B1 -->|Store| B2

    B1 -->|Data| D1

    D1 -->|Generate| D2

    D2 -->|Embed| A2

  

    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;

    classDef highlight fill:#e1f5fe,stroke:#01579b,stroke-width:2px;

  

    class Blog,Analytics,Backend,Visualization highlight

기술 스택

• Google Analytics -> 수집
• Looker Studio -> 임베드 코드 제공

테스트

• @google-analytics/data
• Node.js