1月以降の案件でGSC、GTM、GA4を使うかもしれないので、
前回の記事で作成したサーバーに、GSC、GTM、GA4を導入して、練習をしてみました。
1.GSC(サイトの検索パフォーマンス分析などをするツール)の設定
2.出てきたHTMLファイルをFTPなどを使って/public_html/下にアップロード
これで設定は完了です。
(作ったばかりなので分析結果が表示されていないです 表示されたら画像を差し替えます)
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を入力すれば、タグが正しく発火しているか確認できます!
3.GA4(サイトやアプリのユーザー行動を分析するツール)の設定と、GTMとの連携
ここからが本題です!
GA4の分析画面
リアルタイムでアクティブユーザーがわかるのは凄い!!!
GTMとの連携
GTMにGA4のタグを追加します。
GA4で得られた測定IDを入力し、イベント名を設定したりトリガーを設定すれば
さらに、トリガーもいろいろなものが作れて、たとえば、フォーム送信用のトリガーを設定すると、
GTMのプレビュー画面でフォーム送信のデータを見ることができます!
3つのツールを、氷山の一角程度しか使いこなせていないので、今後もいろいろな機能を試していきます!