Wie man das Ranking beliebter Seiten aus Google Analytics abruft und einbindet

Einleitung

Mit dem Dienst Ranklet können Sie ganz einfach ein Ranking beliebter Seiten aus Google Analytics abrufen und auf Ihrer Website einbinden.

In diesem Artikel zeige ich Ihnen, wie Sie dieses Ranking in einem HUGO-Blog einbinden.

Vorschau

Vorbereitung

Auf Ihrer Website muss Google Analytics eingerichtet sein.

Schritte

Rufen Sie Ranklet auf.
Klicken Sie auf Sign in with Google und melden Sie sich mit Ihrem Google-Konto an (dieses muss mit Ihrem Google Analytics-Konto verknüpft sein).

Klicken Sie auf Zulassen (許可).

Richten Sie die grundlegenden Informationen ein.

Die Einstellungen wurden wie oben abgebildet vorgenommen.

Wählen Sie unter Google Analytics-Ansicht (Google Analytics ビュー) die Datenansicht aus, aus der Sie das Ranking abrufen möchten.

Richten Sie die Textersetzung ein.

Die Einstellungen wurden wie oben abgebildet vorgenommen. Dies ist so eingestellt, dass | kenji.blog aus dem Seitentitel entfernt wird.

Richten Sie die Vorlage ein.

HTML (Die Platzierungsnummern des Rankings wurden ausgeblendet)

 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 (Schriftgröße geändert und die Beschreibung auf maximal 3 Zeilen begrenzt)

 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 { // 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; /* Zeilenanzahl */
            }
        }
    }
}

JavaScript bleibt unverändert

Kopieren Sie den HTML-Code aus „Auf Website einbinden“ (サイトへの掲載)

Kopieren Sie den angezeigten HTML-Code.

In das HUGO-Template einfügen

Erstellen Sie layouts/partials/ranklet.html und fügen Sie den kopierten HTML-Code ein.

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

Fügen Sie den folgenden Code in der Zeile vor </footer> in layouts/_default/single.html ein.

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

Das ist alles. Damit wird das Ranking wie unten auf dieser Seite angezeigt.