웹페이지에 구글 애널리틱스 적용해보기

이번 포스팅은 제가 올린 유튜브 영상으로 대체합니다.
https://youtu.be/b8QZYqJtokQ
API관련 예시는 하단을 참고해 주세요 :)

0. API요청에 앞서서

• 프론트단에서는 API요청시 CORS 오류 때문에 정상적으로 데이터를 받을 수 없다. 서버에서 요청하도록 하자.
• API요청을 하기 전 먼저 구글 API 대시보드에서 구글 애널리틱스를 추가해야한다.
• 구글애널리틱스의 접근 권한을 승인받은 구글 Access_token이 필요하다. 이에 대한 정보는 다른 블로그를 참고하자.
• 만약 매번 7일 전, 혹은 한 달전의 데이터를 받아야하는 경우, Moment.js를 이용하면 편하게 해당 날짜를 특정지을 수 있다.
• 해당 영상에서 사용한 visualize 라이브러리는 Apexcharts이다.

1. API관련 예시

//유저의 landing페이지 페이지뷰(PV) 및 유니크뷰(UV) 요청
app.get("/api", (req, res) => {
  let query = qs.stringify({
    ids: [Your_View_ID],
    "start-date": "yesterday",  //6daysAgo, 30daysAgo
    "end-date": "yesterday",    //yesterday
    //페이지뷰와 유니크뷰,날짜 데이터를
    metrics: "ga:pageviews,ga:uniquePageviews,ga:date",  
    //페이지 path에 따른 분류
    dimensions: "ga:pagePath", 
    // pagePath가 "/harrycod"에 해당하는 것만 필터링
    filters: "ga:pagePath==/harrycod",  
    access_token: [Your_Accss_Token],
  });
  let url = "https://www.googleapis.com/analytics/v3/data/ga?";
  let result = "";
  axios.get(url + query).then((data) => {
    console.log(data.data);
    res.send(data.data.rows);
  });
});


//유저의 링크 별 클릭수 요청
app.get("/api", (req, res) => {
  let query = qs.stringify({
    ids: [Your_View_ID], 
    "start-date": "today",  //6daysAgo, 30daysAgo
    "end-date": "today",    //today
    //전체 이벤트
    metrics: "ga:totalEvents",  
     //이벤트 카테고리(유저path)와 이벤트 라벨(유저의 개별 링크), 날짜에 따른 데이터
    dimensions: "ga:eventCategory,ga:eventLabel,ga:date", 
    // eventCategory가 "/harrycod"와 일치하는 것만 필터링  
    filters: "ga:eventCategory==/harrycod",  
    access_token: [Your_Accss_Token],
  });
  let url = "https://www.googleapis.com/analytics/v3/data/ga?";
  let result = "";
  axios.get(url + query).then((data) => {
    console.log(data.data);
    res.send(data.data.rows);
  });
});

2. 참고할 만한 사이트

1. https://developers.google.com/analytics/devguides/reporting/core/v3/reference
2. https://ga-dev-tools.appspot.com/query-explorer/