ランキング機能

Last Updated：2026.8.18
ランキングを表示するには、大きく分けて以下の3つのステップを行います。

1.GA4連携設定をする
2.ランキングの作成をする
3.作成したランキングの表示の設定する

なお、ランキングを設定すると下記のように、ランキングを表示することができます。
※ページにサムネイルが設定されている場合、左に設定したサムネイルが表示されます。

ランキング表示イメージ

STEP 1：GA4連携設定をする

1：必要な情報の確認・取得（事前準備）

まず、設定に必要な2つの情報をあらかじめ手元に用意（メモ・コピー）しておきます。

1-1. CMSから「承認済みのリダイレクト URI」を取得

CMSの左メニューから [ サイト ] ＞ [ ランキング ] ＞ [ GA4連携設定 ] を開きます。
画面内に表示されている 「承認済みのリダイレクト URI」 をコピーして控えます。
URL例： https://〇〇〇.com/cms/sites/1/ranking/ga4/setting/callback

1-2. GA4から「プロパティ ID」を取得

Google アナリティクス にアクセスします。
①左下の [ 歯車アイコン（管理）] をクリックします。
②プロパティ列にある [ プロパティの詳細 ] を選択します。
画面右上に表示されている 「プロパティ ID」（数字）をコピーして控えます。
GA4管理画面のプロパティ詳細およびプロパティIDの位置

プロパティIDの拡大表示

2：Google Cloud Platform での設定（API有効化と認証情報作成）

Google Analytics APIを利用できるようにし、CMSと連携するための認証情報（キー）を発行します。

2-1. Google Analytics Data API の有効化

Google API Library（Analytics Data API） へアクセスします。
[ 有効にする ] ボタンをクリックします。
Google Analytics Data APIの概要画面と「有効にする」ボタン

2-2. OAuth クライアント ID の作成

左メニューの [ 認証情報 ] を選択し、画面上部の [ 認証情報を作成 ] ＞ [ OAuth クライアント ID ] をクリックします。
「認証情報を作成」ドロップダウンから「OAuth クライアント ID」を選択する画面]
各項目を以下のように設定します。

  • アプリケーションの種類： ウェブ アプリケーション
  • 名前： 任意の名称を入力（例：demo用アナリティクスAPI）
  • 承認済みの JavaScript 生成元： 利用中のCMSドメインを入力（例：[https://〇〇〇.cypochi.com]）
  • 承認済みのリダイレクト URI：1-1 で控えた「リダイレクト URI」を貼り付け

設定後[ 作成 ] ボタンをクリックします。

OAuth クライアント ID の設定入力画面

2-3. クライアント ID と クライアント シークレット の取得  

作成後に表示される「OAuth クライアントを作成しました」のポップアップから、以下の2点をコピーして控えます。

  • クライアント ID
  • クライアント シークレット
発行されたクライアントIDとクライアントシークレットが表示されたポップアップ画面

3：CMSでの設定とアカウント認証

取得した情報をCMSに入力し、最終的な連携認証を行います。

3-1. CMSへ設定情報の入力

CMSの [ サイト ] ＞ [ ランキング ] ＞ [ GA4連携設定 ] 画面を開きます。
以下の3項目を入力し、設定を保存します。
CMSの [ サイト ] ＞ [ ランキング ] ＞ [ GA4連携設定 ] 画面を開きます。
以下の3項目を入力し、設定を保存します。

  • クライアント ID（2-3で取得）
  • クライアント シークレット（2-3で取得）
  • プロパティ ID（1-2で取得）
CMSへ設定情報の入力

3-2. Google アカウントの認証実行

保存後、画面内の [ 認証 ] ボタンをクリックします。
Googleのアカウント選択画面が表示されたら、2で設定したGoogleアカウント を選択します。
「Google アカウントへのアクセスをリクエストしています」という画面が表示されたら、[ 許可 ] をクリックします。
CMSの画面に自動で戻り、認証状況が 「認証済み」 に変わっていれば設定完了です。

STEP 2：ランキングの作成をする

CMSの左メニューから [ サイト ] ＞ [ ランキング ] ＞ [ ランキング一覧 ] を開きます。
このページではランキングの追加、削除、並び替え、複製が可能です。
削除はステータスが非同期のみ可能です。
追加の場合はインプットにランキング名、コードを入れて保存ボタンを押してください。
各ランキングマウスホバーで出てくる矢印クリックで詳細設定ができます。
ランキング一覧画面
詳細画面では下記の設定及び操作をすることができます。

  • 設定期間：ランキングを取得する期間の変更ができます。
  • 出力件数：ランキングの表示件数の変更ができます。
  • URLフィルター：URLで絞り込みができます。
  • 種別：すべて、コンテンツのみ、ニュースイベントのみ、ニュースのみ、イベントのみを指定できます カテゴリー、タグフィルター：ニュースイベントをカテゴリーやタグで絞り込みができます。
  • ソースコード：HTMLの編集が可能です。
  • 保存：設定値を保存します。
  • 同期：ランキングデータを取得して本番、ステージング、プレビュー用のJSONを生成します。同期後は毎日３時に自動同期が走ります
  • プレビューボタン：設定した内容をプレビューできます。
  • 同期停止：配信されたランキングデータを削除し、同期を停止します。
ランキング詳細画面

STEP 3：作成したランキングの表示の設定する

①ランキングを表示したいページの編集画面で基本ブロックver.3を選択します。
②ランキングを表示したい箇所に「おススメリンク」を追加します。
③保存をクリックします。
④ブロック挿入後、登録したランキングのどれを表示させるか指定します。
ランキングブロック挿入方法

ランキング選択
INDEX
役に立ちましたか？