メインコンテンツまでスキップ

GoogleAnalyticsのPV数を元にアクセスランキングを実装する方法

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

GoogleAnalytics(以下、GA)のPV数を元にアクセスランキングを作成するには以下の処理を実装する必要があります。

  1. Kuroco管理画面からGAと連携する
  2. カスタムディメンションを設定する
  3. フロント側でGAの計測タグを埋め込む
  4. コンテンツ定義にPV数を設定するための拡張項目を設定する
  5. 取得したPV数をコンテンツのデータに設定する
  6. アクセスランキング取得用にPV数の降順で10件取得する一覧APIを作成する

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

GAとの連携はGoogle Analytics連携方法のページを参考に行って下さい。

カスタムディメンションを設定する

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

slugを利用する場合のサンプル
ディメンション名は任意のわかりやすい名前を設定して下さい。 Image from Gyazo

フロント側でGAの計測タグを埋め込む

フロント側の設定はGoogle Analytics連携方法のフロントエンドでgoogle-analyticsの設定をするの項目を参考に行って下さい。

このチュートリアルでは、ランキング取得したい詳細ページのPV数のみ取得するので、page_viewイベントの送信を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数が確認出来ます。
※データが蓄積されるまで半日程度かかります、すぐに確認したい場合はリアルタイム計測でpage_viewイベントのパラメータを確認することが出来ます

Image from Gyazo

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

Image from Gyazo ※項目の種別はカウンターを指定する必要があります。
※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
  4. [MAKE REQUEST] でGoogle Analytics Data APIを実行する Image from Gyazo

取得したPV数をコンテンツのデータに設定する

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

Image from Gyazo

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

{*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

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

Image from Gyazo

パラメータ詳細

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

パラメータ名説明
var取得結果をアサインする変数名
viewIdGoogleAnalyticsの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)
cnt: 10
order_query: pv:desc

サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。