WordPressで人気記事ランキングをGA4のデータを使用して表示する方法

WordPressはプラグインなどで独自にページビューを保存することが可能ですが、アクセス毎に処理が行われるのでページのパフォーマンスを損ないます。そこでGoogle Analtytics 4（以下GA4）のデータを活用しWP-Cronで日に1回データを取得し保存することでページのパフォーマンスを保ちながらGA4のデータを活用したいと思います。今回はPV順を人気と定義して以下の流れ人気記事ランキングを表示したいと考えています。

Google Analytics Data APIの設定
WordPressでGA4のデータを取得
取得したデータをカスタムフィールドに保存（WP-Cronを使用）
人気記事ランキングとして表示（PV順）

Google Analytics Data APIの設定

Google Cloud Console にアクセスし、新しいプロジェクトを作成。

次に「Google Analytics Data API」を有効にします。
左上ハンバーガー > APIとサービス > ライブラリの検索窓から「Google Analytics Data API」で検索すると早いです。

続いて認証情報からサービスアカウントを作成、JSONキーをダウンロードします。
①サービスアカウントの詳細を入力します。
②、③は省略可能です。

作成したサービスアカウントのJSONキーをダウンロードします。

GA4に移動しプロパティのアクセス管理から先程作成したサービスアカウントのメールアドレスを「閲覧者」以上の権限を追加します。

WordPressでGA4のデータを取得する

GA4 APIを利用するには、Google APIのクライアントライブラリが必要です。ComposerでWordPress環境に google/apiclient をインストールします。
今回はGA4を取得して特定のカスタムフィールドに保存するWordPressプラグインとして作成します。

・Composer

ディレクトリ名は任意ですがwp-content/plugins/ga4-popular-posts/のように作成しgoogle/apiclientをインストールします。

composer require google/apiclient

人気記事データを取得するコードを実装

先ほどダウンロードしたJSONキーをリネームして/ga4-popular-posts/に格納します。
今回はga4-service-account.jsonとします。同階層にga4-popular-posts.phpを作成します。

<?php
/**
 * Plugin Name: GA4 Popular Posts
 * Description: GA4のデータを取得し、ACFのカスタムフィールドにページビューを保存するプラグイン
 * Version: 1.0
 * Author: HIKOSEN0003
 */

// 必要なファイルを読み込む
require_once plugin_dir_path(__FILE__) . 'vendor/autoload.php';  // Composerでインストールしたファイルの読み込み

// GA4からデータを取得して保存する関数
function fetch_ga4_pageviews() {
    // GA4認証ファイルのパス
    $KEY_FILE_LOCATION = plugin_dir_path(__FILE__) . 'ga4-service-account.json';  // プラグイン内に配置した認証ファイル
    $GA4_PROPERTY_ID = 'HOGEHOGE';

    // Google APIクライアントのセットアップ
    $client = new Google_Client();
    $client->setAuthConfig($KEY_FILE_LOCATION);
    $client->addScope('https://www.googleapis.com/auth/analytics.readonly');

    $analytics = new Google_Service_AnalyticsData($client);

    // 今日の日時を取得
    $endDate = date('Y-m-d', strtotime('yesterday'));  // 昨日の日付
    $startDate = date('Y-m-d', strtotime('-7 days'));  // 7日前の日付

    // 直近7日間のページビューを取得するリクエスト
    $request = new Google_Service_AnalyticsData_RunReportRequest([
        'dateRanges' => [
            [
                'startDate' => $startDate,  // 7日前から
                'endDate' => $endDate,  // 昨日まで
            ]
        ],
        'metrics' => [['name' => 'screenPageViews']],  // ページビュー
        'dimensions' => [['name' => 'pagePath']],  // ページパス（URL）
        'limit' => 100,
        'orderBys' => [['metric' => ['metricName' => 'screenPageViews'], 'desc' => true]],  // ページビュー順
    ]);

    // GA4 APIからデータを取得
    $response = $analytics->properties->runReport("properties/{$GA4_PROPERTY_ID}", $request);
    // 取得したデータをカスタムフィールドに保存
    foreach ($response->getRows() as $row) {
        $pagePath = $row->getDimensionValues()[0]->getValue();
        $views = (int) $row->getMetricValues()[0]->getValue();

        // 投稿のカスタムフィールドにページビュー数を保存
        $post_id = get_post_id_by_url($pagePath);  // URLに対応する投稿IDを取得
        if ($post_id) {
            update_field('ga4_pv', $views, $post_id);  // ACFのカスタムフィールドに保存
        }
    }
}

// 投稿のURLから投稿IDを取得する関数
function get_post_id_by_url($url) {

    // 先頭に `/` がある場合に対応するため `/?` を追加
    if (preg_match('~^/?blog/blog-(\d+)/?$~', $url, $matches)) {
        $post_id = (int) $matches[1];  // URLの末尾から数字を抽出

        // 投稿IDがカスタム投稿タイプ「blog」に対応するか確認
        $post = get_post($post_id);
        if ($post && 'blog' === $post->post_type) {
            return $post_id;
        }
    }
    return false;
}

// WP-Cronで1日1回実行するように設定
if (!wp_next_scheduled('fetch_ga4_pageviews_daily')) {
    wp_schedule_event(time(), 'daily', 'fetch_ga4_pageviews_daily');
}

// WP-Cronにフックしてデータ取得関数を実行
add_action('fetch_ga4_pageviews_daily', 'fetch_ga4_pageviews');

昨日から1週間前のPVを取得し、WP-Cronで1日1回実行します。
本記事は/blog/blog-{post-id}の構成ですがurlにマッチするように記述する必要があります。

フォルダ構成はこんな感じです👇️

plugins
└── ga4-popular-posts
    ├── composer.json
    ├── composer.lock
    ├── ga4-popular-posts.php
    ├── ga4-service-account.json
    └── vendor

WordPressで人気記事ランキングを表示する方法

記事のカスタムフィールド ga4_pv を基に、ランキングを表示します。

function display_popular_posts() {
$popular_posts = get_posts([
'post_type' => 'blog',
'meta_key' => 'ga4_pv',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => 5,
]);

echo '<ul class="popular-posts">';
foreach ($popular_posts as $post) {
echo '<li><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a> (' . get_post_meta($post->ID, 'ga4_pv', true) . ' PV)</li>';
}
echo '</ul>';
}

以上になります。今回はPVで行いましたがGA4にある指標からだと数値を取得できますのでプロジェクトやクライアントの重要指標で柔軟に設定する事もできそうです。

WordPressで人気記事ランキングをGA4のデータを使用して表示する方法

Google Analytics Data APIの設定

WordPressでGA4のデータを取得する

人気記事データを取得するコードを実装

WordPressで人気記事ランキングを表示する方法

CONTACT