GSC、GTM、GA4を使ってみた

1月以降の案件でGSC、GTM、GA4を使うかもしれないので、
[前回の記事](https://qiita.com/ryotaro-fukushima/items/9d8c84c05424b92755ae)で作成したサーバーに、GSC、GTM、GA4を導入して、練習をしてみました。

## 1.GSC（サイトの検索パフォーマンス分析などをするツール）の設定
1.こちらの画面にサーバーのURL（xsrv.jpを入力）
![スクリーンショット 2024-12-26 14.45.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/3ec167c2-f716-0e35-25f2-423d85598d2e.png)

2.出てきたHTMLファイルをFTPなどを使って/public_html/下にアップロード
![スクリーンショット 2024-12-26 14.47.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/1d61616b-e095-cf6a-ba57-08fc515f2567.png)

これで設定は完了です。
（作ったばかりなので分析結果が表示されていないです:cry:　表示されたら画像を差し替えます:bow_tone1:）
![スクリーンショット 2024-12-26 15.01.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/2b35a97d-5b0f-d100-e2b3-5d01726a3698.png)

## 2.GTM（サイトやアプリのタグ管理ツール）の設定
1.各種設定
2.GTMを作動させるために、header.phpにコードを追加（headタグとbodyタグの直後）
```php:header.php
<!DOCTYPE html>
<html lang="ja">

<head>
    <!-- Google Tag Manager -->
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WVPB9J7S');
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>

<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVPB9J7S"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <header>
        <h1><?php bloginfo('name'); ?></h1>
        <nav>
            <?php wp_nav_menu(); ?>
        </nav>
    </header>
```
あとはプレビュー画面でURLを入力すれば、タグが正しく発火しているか確認できます！
![スクリーンショット 2024-12-26 18.33.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/5bb964ca-a19f-b0ac-e0c0-bb51fd8771c5.png)

## 3.GA4（サイトやアプリのユーザー行動を分析するツール）の設定と、GTMとの連携
ここからが本題です！
GA4の分析画面
![スクリーンショット 2024-12-26 16.27.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/dd268278-c674-f8f1-021a-a12e22804db7.png)
リアルタイムでアクティブユーザーがわかるのは凄い！！！
### GTMとの連携
GTMにGA4のタグを追加します。
GA4で得られた測定IDを入力し、イベント名を設定したりトリガーを設定すれば
![スクリーンショット 2024-12-26 16.07.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/2a79cdb2-5ac3-deeb-0310-6cfa23f8951e.png)

用途に合わせたタグを作ることができます。
![スクリーンショット 2024-12-27 9.32.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/7cf48ae1-8f5f-4208-f8cc-930c5f671b9c.png)

さらに、トリガーもいろいろなものが作れて、たとえば、フォーム送信用のトリガーを設定すると、
![スクリーンショット 2024-12-27 9.32.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/49a023ff-0bdb-436e-4ead-05b60f7b8207.png)

GTMのプレビュー画面でフォーム送信のデータを見ることができます！
![スクリーンショット 2024-12-26 16.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/ac0d27f3-aaad-2212-e345-56d87c8ca1a3.png)

３つのツールを、氷山の一角程度しか使いこなせていないので、今後もいろいろな機能を試していきます！