Craft CMS の Analytics プラグインをつかって Google Analytics ベースの PV ランキングを表示する #craftcms

ランキングを出したいといった要望はよくあるので、 Craft CMS だとどんな感じでやるのかなー、というかんじで調べてみた。

直接PVランキングを出すようなプラグインはなさそうだったので Analytics プラグインを使ってみた。

Analytics
https://plugins.craftcms.com/a...

プラグインのインストールと設定

このプラグインをインストールして、 Google Analytics API 周りの設定をする。

プラグインの設定が終わるとウィジェットなども追加ができる。

このプラグインの機能としてはこっちのほうがメインなんだと思われる。

ランキングを表示する

このプラグインではテンプレートでPVデータなどをリクエストして、結果を受け取って表示するということが出来る。

基本的にはこちらに書かれてある内容の通り。

Analytics 4 Documentation | Requesting Google Analytics’ API
https://docs.dukt.net/analytic...

ざっくりとこんなかんじのコードで試してみた。

{% set response = craft.analytics.api({
    viewId: 1,
    startDate: date('7daysAgo')|date("Y-m-d"),
    endDate: 'today',
    metrics: 'ga:pageviews',
    dimensions: 'ga:pagePath',
    orderBys: [
        {
            fieldName: 'ga:pageviews',
            orderType: 'VALUE',
            sortOrder: 'DESCENDING'
        }
    ],
    pageSize: 10,
}).send() %}

{% if response.success %}
    <table class="table">
        <thead>
        <tr>
            <th>ページタイトル</th>
            <th>サムネイル</td>
            <th>アクセス数</th>
        </tr>
        </thead>

        <tbody>
        {% for row in response.report.data.rows %}
        {% set url = row.dimensions[0] %}
        {% set _slug = url|split('/')|last %}
        {% set _section = '' %}
        {% if _slug %}
        {% set _entry = craft.entries.slug(_slug).one() %}
            {% if _entry %}
                {% set _section = _entry.sectionId %}
            {% endif %}
        {% endif %}
            <tr>
                <td>{% if _entry %}{{ _entry.title }}{% else %}{{ url }}{% endif %}</td>
                <td>{% if _section == '11' %}<img src="{{_entry.bookImage.one().url}}" width="100" />{% elseif _section == '3' %}<img src="{{_entry.c_asset.one().url}}" width="100" />{% else %}デフォルト値{%endif%}</td>
                <td>{{ row.metrics[0].values[0] }}</td>
            </tr>
        {% set _entry = '' %}
        {% endfor %}
        </tbody>
    </table>
{% else %}
    Error: {{ response.errorMessage }}
{% endif %}

こんなかんじで取り出せた。

詳細ページ以外も含まれているので、この辺はGAのviewの方で調整するか、取得したあとに詳細ページだけにフィルタをかけるかのどちらかになるかと思う。

ページごとのPVを元にするので、

metrics: 'ga:pageviews',
dimensions: 'ga:pagePath',

でリクエストを投げる。

パラメータについてはこちらが参考になった。

Dimensions & Metrics Explorer — Google Analytics Demos & Tools
https://ga-dev-tools.appspot.c...

pagepathを元にURLを取り出して、それをスラッシュで分割して配列にセットしたうえでslugを取り出して、どのエントリか？を取り出した。

slug をとりだして判定するところとかはセクションの数によって変わってくると思うのでこの辺は仕様に合わせて変更する。

Craft CMS で特定のエントリを取得する - Qiita
https://qiita.com/BUN/items/5e...

ランキングのエントリが取り出せるので、エントリが持ってる情報を見せたいように加工ができるのはやりやすかった。