Comment obtenir et intégrer un classement des pages populaires depuis Google Analytics

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

Introduction

En utilisant un service appelé Ranklet, vous pouvez facilement récupérer le classement des pages populaires depuis Google Analytics et l’intégrer sur votre site.

Dans cet article, nous allons vous présenter comment l’intégrer sur un blog HUGO.

Aperçu du fonctionnement

Préparation

Avoir configuré Google Analytics sur votre site

Étapes

Accédez à Ranklet
Cliquez sur Sign in with Google pour vous connecter avec votre compte Google (celui-ci doit être associé à votre compte Google Analytics)

Cliquez sur Autoriser (許可)

Configurez les informations de base

La configuration a été effectuée comme indiqué ci-dessus.

Dans Vue Google Analytics (Google Analytics ビュー), sélectionnez la vue dont vous souhaitez obtenir le classement.

Configurez le remplacement de texte

La configuration a été effectuée comme indiqué ci-dessus. Ce paramètre est défini pour supprimer | kenji.blog du titre de la page.

Configurez le modèle

HTML (les numéros de classement ont été masqués)

 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 (la taille de police a été modifiée et la description s’affiche sur 3 lignes)

 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 { // Réinitialisation
 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; /* Nombre de lignes */
 }
 }
 }
}

Aucun changement pour JavaScript

Copiez le code HTML depuis « Publier sur le site »

Copiez le code HTML affiché

Collez-le dans le modèle HUGO

Créez layouts/partials/ranklet.html et collez-y le code HTML copié

1

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

Collez le code suivant sur la ligne précédant </footer> dans layouts/_default/single.html

1

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

C’est tout. Le classement s’affichera désormais comme au bas de cette page.

Google Analytics on kenji.blog

Comment obtenir et intégrer un classement des pages populaires depuis Google Analytics

Introduction

Aperçu du fonctionnement

Préparation

Étapes