---
title: GoogleAnalyticsのPV数を元にアクセスランキングを実装する方法
description: 指定したコンテンツ定義の詳細ページのPV数を元に、過去1週間以内のアクセスランキングを表示する方法を説明します。
---

本チュートリアルでは、指定したコンテンツ定義の詳細ページのPV数を元に、過去1週間以内のアクセスランキングを表示する方法を説明します。  

GoogleAnalytics(以下、GA)のPV数を元にアクセスランキングを作成するには以下の処理を実装する必要があります。
1. [Kuroco管理画面からGAと連携する](#kuroco管理画面からgaと連携する)
2. [カスタムディメンションを設定する](#カスタムディメンションを設定する)
3. [フロント側でGAの計測タグを埋め込む](#フロント側でgaの計測タグを埋め込む)
4. [コンテンツ定義にPV数を設定するための拡張項目を設定する](#コンテンツ定義にpv数を設定するための拡張項目を設定する)
5. [取得したPV数をコンテンツのデータに設定する](#取得したpv数をコンテンツのデータに設定する)
6. [アクセスランキング取得用にPV数の降順で10件取得する一覧APIを作成する](#アクセスランキング取得用にpv数の降順で10件取得する一覧apiを作成する)


## Kuroco管理画面からGAと連携する

GAとの連携は[Google Analytics連携方法](/ja/docs/tutorials/how-to-link-google-analytics/)のページを参考に行って下さい。  

## カスタムディメンションを設定する
下記、いずれかのようにカスタムディメンションを設定してください。  
閲覧されたコンテンツを特定するのに利用しますので送信する値はコンテンツID、もしくはslugとなります（どちらか一方で問題ありませんのでどちらを使用するかはフロントの構成に合わせて決めて下さい）。

slugを利用する場合のサンプル  
ディメンション名は任意のわかりやすい名前を設定して下さい。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/46eb4193f85114498a3afab205f37e1e.png)

## フロント側でGAの計測タグを埋め込む
フロント側の設定は[Google Analytics連携方法](/ja/docs/tutorials/how-to-link-google-analytics/#フロントエンドでgoogle-analyticsの設定をする)のフロントエンドでgoogle-analyticsの設定をするの項目を参考に行って下さい。  

このチュートリアルでは、ランキング取得したい詳細ページのPV数のみ取得するので、page_viewイベントの送信をmountedに埋め込む形で実装します。

```js [詳細ページのmountedに追記]
if (process.browser) {
    const slug = this.$route.params.asset_name // ページのURLなどからslugを取得(実際の構成に合わせて変更して下さい)
    this.$gtag('event', 'page_view', {
        'detail_page_slug': slug
    })
}
```

この段階でフロントの表示を確認し、正しくpage_viewイベントの送信が行われていればGAコンソール上でカスタムディメンションを指定することで、下記のようにPV数が確認出来ます。<br/>
※データが蓄積されるまで半日程度かかります、すぐに確認したい場合はリアルタイム計測でpage_viewイベントのパラメータを確認することが出来ます

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d0a738ffc23fa88f79cb09f67a68ed2a.png)

## コンテンツ定義にPV数を設定するための拡張項目を設定する

![Image from Gyazo](https://t.gyazo.com/teams/diverta/139708376ac1e07bb20fd31e017520e6.png)
※項目の種別は`カウンター`を指定する必要があります。  
※PV数をコンテンツに設定する際、ここで設定したslugを利用します。

## API経由でのPV数取得の確認
https://ga-dev-tools.google/ga4/query-explorer/
を利用することでAPI経由でPV数を取得出来るか確認出来ます。

1. 左上の「Demos & Tools」下のトグルスイッチで `GA4` を選択
2. `Select property` で対象のプロパティを選択
3. `dateRanges` `dimensions` `metrics` `limit` `orderBys` をそれぞれ設定する
 `dimensions` には「customEvent:[設定したslugカスタムディメンション定義]」を指定する
![Image from Gyazo](https://t.gyazo.com/teams/diverta/8f3ce7047cef7256bf7e452b78a53e61.png)
 4. [MAKE REQUEST] でGoogle Analytics Data APIを実行する
![Image from Gyazo](https://t.gyazo.com/teams/diverta/114056816ebfc68a103614f620244b40.png)

## 取得したPV数をコンテンツのデータに設定する
取得したPV数をコンテンツデータに設定するため、下記のようなSmartyPluginを実行させるバッチ処理を作成します。  
[オペレーション]->[[バッチテンプレート](/ja/docs/management/batch-template/)]から[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a32389e96335d0efc526bd75b5af8b0d.png)

バッチ処理の編集画面が開くので以下のバッチ処理を追加します。

```smarty
{*GAからPV数を取得してカウンターに設定*}
{googleanalytics var=result
update_column_slug="pv"
update_target_dimension="customEvent:detail_page_slug"
updated_topics_ids='updated_topics_ids'
topics_group_id=1}{*topics_group_idは対象のコンテンツ定義IDを指定して下さい*}

{*カウンターデータの内容をコンテンツデータに反映*}
{assign_array var=ext_data values=''}
{assign var=ext_data.topics_ids value=$updated_topics_ids}
{batch module='topics' name='sync_counter' ext_data=$ext_data}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/152a4106c8b97c68dbceab898f00e11e.png)

追加ができたらバッチ処理を動作させる頻度を設定します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6c0e0611f9bd96f9cc412bc17ec0e15b.png)


### パラメータ詳細
googleanalyticsプラグインでは下記のパラメータが利用出来ます。  

| パラメータ名 | 説明 |
| :--- | :--- |
|var|取得結果をアサインする変数名|
|viewId|GoogleAnalyticsのViewID|
|update_column_slug|アップデートするカラムのSlug|
|update_column_index|繰り返しカラムの場合、何番目をアップデートするか指定|
|update_target_metric|利用するメトリック（デフォルト：ga:pageviews）|
|update_target_dimension|利用するディメンション（デフォルト：ga:pagePath）|
|topics_group_id|コンテンツ定義ID|
|startDate|集計開始日（デフォルト：7日前）|
|endDate|集計終了日（デフォルト：今日）|
|queries|クエリの直接指定|


## アクセスランキング取得用にPV数の降順で10件取得する一覧APIを作成する

PV数の降順で10件取得する為のAPI設定は下記となります。

|項目   |内容  |
| :--- | :--- |
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|list|  
|パラメータ|topics_group_id: `(対象のコンテンツ定義ID)`<br/>cnt: `10`<br/>order_query: `pv:desc`|

