Google 애널리틱스에서 인기 페이지 랭킹을 가져와 배치하는 방법

Mon, 10 Apr 2023 20:26:57 +0900

시작하며

Ranklet이라는 서비스를 사용하면 Google 애널리틱스에서 인기 페이지 랭킹을 가져와 쉽게 배치할 수 있습니다.

이 글에서는 HUGO 블로그에 배치하는 방법을 소개합니다.

동작 이미지

준비

사이트에 Google 애널리틱스가 설정되어 있을 것

절차

Ranklet에 접속합니다.
Sign in with Google을 클릭하여 Google 계정으로 로그인합니다 (Google 애널리틱스 계정과 연결되어 있어야 합니다).

허용을 클릭

기본 정보를 설정합니다.

위와 같이 설정했습니다.

Google Analytics 뷰에서는 랭킹을 가져오고 싶은 뷰를 선택합니다.

텍스트 치환을 설정합니다.

위와 같이 설정했습니다. 페이지 제목의 | kenji.blog를 삭제하기 위해 설정했습니다.

템플릿을 설정합니다.

HTML (랭킹 숫자를 숨겼습니다)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (폰트 크기를 변경하고, 설명문이 3줄로 표시되도록 했습니다)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // 리셋
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 줄 수 */
 }
 }
 }
}

JavaScript는 변경 없음

사이트 게재에서 HTML을 복사합니다.

표시된 HTML을 복사합니다.

HUGO 템플릿에 붙여넣습니다.

layouts/partials/ranklet.html을 생성하고, 복사한 HTML을 붙여넣습니다.

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

layouts/_default/single.html의 </footer> 앞 줄에 아래 코드를 붙여넣습니다.

1

{{- partial "ranklet.html" . }}

이상입니다. 이제 이 페이지 아래와 같이 랭킹이 표시됩니다.

Ranklet on kenji.blog

Google 애널리틱스에서 인기 페이지 랭킹을 가져와 배치하는 방법

시작하며

동작 이미지

준비

절차