구글 애널리틱스 api를 이용한 조회수 확인 버튼 만들기
이전에 google spreadsheet를 db로 이용하여 조회수 확인하는 방법을 포스팅한 적이 있는데요.
구글 스프레드시트를 데이터베이스로 이용하기 - 1.1 방문로그 기록 편
티스토리 개별 포스트 조회수 및 순위 표시하기 - 구글 스프레드시트를 데이터베이스로 이용하기
생각해보니 google analytics에 훨씬 정확한 정보가 있는데 굳이 방문로그를 왜 기록해야하나 싶어졌습니다.
(방문로그 기록편에서는 호기롭게 이게 구글 애널리틱스보다 더 좋다!고 했지만 구글 애널리틱스가 훨씬 분석도 잘해주고 좋습니다..)
구글 애널리틱스에 정보가 있으면 그걸 불러올 수만 있으면 되겠죠? 당연히도 구글애널리틱스는 여러가지 api를 제공하고있습니다.
그 중에 조회수 확인에 필요한 Analytics Reporting API V4를 이용해보도록 하겠습니다.
구글 스프레드 시트를 이용하는 방법보다는 직관적이고 쉽습니다. (누군가에겐 더 어려울수도..)
당연히도 구글 애널리틱스를 설치해서 이용중이라는 가정 하에 진행합니다.
※이 방법을 통해서는 구글애널리틱스 계정으로 로그인 중일 때만 조회수 확인이 가능합니다. 본인뿐만 아니라 다른사람에게도 조회수를 보여주려면 기존의 스프레드시트를 통한 방법을 이용하세요.
준비사항
API를 사용하기 위해서는 다음 과정을 따라야합니다.
0. API대시보드에서 프로젝트 생성 및 Google Analytics Reporting API를 대시보드에 추가합니다.
1. 사용자 인증 페이지에서 사용자 인증정보를 생성합니다.
OAuth클라이언트ID를 만들어줍니다.
유형은 웹애플리케이션, 이름은 아무렇게나 정해줍니다. 승인된 자바스크립트 원본은 블로그주소를 입력해줍니다. 맨뒤에"/"는 빼고 입력하도록 합니다,
그러면 클라이언트 ID가 나타납니다 이걸 잘 복사해둡시다.
2. Account Explorer를 통해 View ID를 잘 복사해둡니다.
view아래에 있는 숫자가 View ID입니다.
.
HTML 및 JS 예시
1. 조회수 확인에 쓸 버튼을 삽입합니다.
<div class="getViews">조회수 확인</div>
어차피 관리자만 볼 수 있기때문에 <s_ad_div>안에 삽입 했습니다.
(<s_ad_div>는 티스토리에서 관리자 계정으로 로그인 했을 때 글수정,삭제같은 메뉴가 나타나는 부분입니다.)
2. </body>윗줄에 스크립트를 삽입합니다.
<script>
// Replace with your client ID from the developer console. https://console.developers.google.com/apis/credentials
var CLIENT_ID = 'client_ID';
// Replace with your view ID. from https://ga-dev-tools.appspot.com/account-explorer/
var VIEW_ID = 'view_ID';
var DISCOVERY = 'https://analyticsreporting.googleapis.com/$discovery/rest';
var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];
function authorize(event) {
// Handles the authorization flow.
// `immediate` should be false when invoked from the button click.
var useImmdiate = event ? false : true;
var authData = {
client_id: CLIENT_ID,
scope: SCOPES,
immediate: useImmdiate
};
gapi.auth.authorize(authData, function(response) {
if (response.error) {
$(".getViews").text("인증필요");
}
else {
$(".getViews").text("불러오는 중");
queryReports();
}
});
}
function queryReports() {
// Load the API from the client discovery URL.
gapi.client.load(DISCOVERY
).then(function() {
// Call the Analytics Reporting API V4 batchGet method.
gapi.client.analyticsreporting.reports.batchGet( {
"reportRequests":[
{
"viewId":VIEW_ID,
"dateRanges":[
{
"startDate":"7daysAgo",
"endDate":"today"
}],
"dimensions": [
{
"name": "ga:pagePath"
}],
"dimensionFilterClauses": [
{
"filters": [
{
"dimensionName": "ga:pagePath",
"not": false,
"expressions": [
"\\"+location.pathname
],
"caseSensitive": false,
}
]
}],
"metrics":[
{
"expression":"ga:hits"
}],
"orderBys": [
{
"fieldName": "ga:hits",
"sortOrder": "DESCENDING",
}
],
}]
} ).then(function(response) {
var parse = JSON.parse(response.body);
var views = "지난 1주일간 조회수: "+parse.reports[0].data.totals[0].values[0];
console.log(views);
$(".getViews").text(views);
})
.then(null, function(err) {
// Log any errors.
console.log(err);
});
});
}
$(".getViews").click(function(){authorize(event);});
</script>
<script async src="https://apis.google.com/js/client.js"></script>
파란색으로 표시된 client ID와 view ID는 앞에서 얻은 값으로 바꿔주세요.
굵게 표시된 부분은 수정할 수 있는 쿼리입니다.
자세한 내용과 문법은 https://developers.google.com/analytics/devguides/reporting/core/v4/rest/v4/reports/batchGet#reportrequest 여기를 참조하시고,
쿼리가 어떤 결과를 불러오는지는 https://ga-dev-tools.appspot.com/query-explorer/ 여기서 확인할 수 있습니다.
확인 예시
관리도구 아래에 조회수 확인이 생겼습니다. 맨처음 클릭하면
위와 같이 인증창이 실행됩니다. 이 아이디는 구글 애널리틱스 아이디여야합니다.
로그인하면 승인요청이 나타나는데 승인합니다.
잘못된 아이디로 로그인했을 경우 구글에서 로그아웃한뒤 다시 시도하시면 됩니다.
정상출력되는 모습입니다.
공지사항 글 처럼 관리자도구가 없어서 조회수 확인 버튼도 보이지 않는경우,
F12를 눌러 개발자도구 콘솔에서 authorize()를 입력하면 콘솔에도 나타납니다.
(크롬에서 개발자도구에 콘솔이 없는경우 esc를 누르면 나타납니다)
이 밖에도 구글 애널리틱스 API는 훨씬 다양한 기능을 지원합니다.
이 글에서는 단순히 조회수만을 불러왔을 뿐이지만,
dimension과 metrics, filter를 사용하여 구글 애널리틱스의 모든 정보를 불러올 수 있습니다. 활용하시는 분의 실력에 따라 가능성이 무궁무진해보이네요!
