8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

1月以降の案件でGSC、GTM、GA4を使うかもしれないので、
前回の記事で作成したサーバーに、GSC、GTM、GA4を導入して、練習をしてみました。

1.GSC(サイトの検索パフォーマンス分析などをするツール)の設定

1.こちらの画面にサーバーのURL(xsrv.jpを入力)
スクリーンショット 2024-12-26 14.45.54.png

2.出てきたHTMLファイルをFTPなどを使って/public_html/下にアップロード
スクリーンショット 2024-12-26 14.47.33.png

これで設定は完了です。
(作ったばかりなので分析結果が表示されていないです:cry: 表示されたら画像を差し替えます:bow_tone1:
スクリーンショット 2024-12-26 15.01.42.png

2.GTM(サイトやアプリのタグ管理ツール)の設定

1.各種設定
2.GTMを作動させるために、header.phpにコードを追加(headタグとbodyタグの直後)

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

3.GA4(サイトやアプリのユーザー行動を分析するツール)の設定と、GTMとの連携

ここからが本題です!
GA4の分析画面
スクリーンショット 2024-12-26 16.27.30.png
リアルタイムでアクティブユーザーがわかるのは凄い!!!

GTMとの連携

GTMにGA4のタグを追加します。
GA4で得られた測定IDを入力し、イベント名を設定したりトリガーを設定すれば
スクリーンショット 2024-12-26 16.07.37.png

用途に合わせたタグを作ることができます。
スクリーンショット 2024-12-27 9.32.41.png

さらに、トリガーもいろいろなものが作れて、たとえば、フォーム送信用のトリガーを設定すると、
スクリーンショット 2024-12-27 9.32.51.png

GTMのプレビュー画面でフォーム送信のデータを見ることができます!
スクリーンショット 2024-12-26 16.54.54.png

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

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?