Twenty Twentyの子テーマのfunctions.phpにGA4のタグを手差しする

　Googleアナリティクスの新版GA4のタグをワードプレステーマTwenty Twenty-twoに手差ししました。

ステップ1

　GA4にログインして、タグをコピーする。

管理→プロパティーを選択→データの収集と修正→データストリーム→プロパティーのレコードをクリック

　ウェブストリームのページがスライドで出てくるので、一番下の「タグの実装手順を表示する」を選ぶと「手動でインストール」のタブにjsコードが出てくる。

　もっと簡単な方法があるのかもしれませんが、私はこうやって取っています。

ステップ2

　functions.phpに書き込むコードを作る。

　アナリティクスのコードの場合は、下記のような感じで、X-XXXXXXXXXXの部分は自分のアカウントの番号になると思います。

function ga4_tag() {
$ga4tag = <<< EOM
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=X-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'X-XXXXXXXXXX');
</script>
EOM;
echo $ga4tag;
}
add_action( 'wp_head', 'ga4_tag' );

　詳しいことは余談に書きました。

ステップ3

　ワードプレスにログインし、管理画面で「外観 → テーマ → テーマファイルエディタ」に入り、上で作ったコードをコピペし、保存。

twenty twenty head area additional scripts

ステップ4

　再びGA4（アナリティクス）にログインし、コードを取得したページに戻り、「ウェブサイトをテストする」でテスト。

余談

　headエリアに書きたいコードなら、アナリティクスのコードに限らず書いて大丈夫のはずです。

　但し、今回使ったコードは、出力範囲を指定していないので全てのページに書き出されます。（だから、一応、タイトルにアナリティクス向けと書いておきました。）

※例えば、広告など、記事一覧やプライバシーポリシーのところには出力したくないなどの考慮はありません。

function ga4_tag() {
$ga4tag = <<< EOM

// EOMとEOM;の間にheadエリアに書き入れたいことを記述する

EOM;
echo $ga4tag;
}
add_action( 'wp_head', 'ga4_tag' );

　まず、「function ga4_tag() 」は、「機能、ga4_tagとは」みたいな意味で、「{」から最後から2行目の「}」まで命令内容を定義しています。

　アナリティクスのタグを入れるのに使うので、「ga4_tag」という名前の関数にしました。

　一番最後の行の「add_action( ‘どこで’ , ‘なにを’ );」は、ワードプレスに備わっている機能で、「どこで」の部分はアクションフック「’wp_head’」を使うことで「headエリア」を指定し、「なにを」の部分で「ga4_tag」を実行させます。

　「ga4_tag」は、「echo $ga4tag;」(＝$ga4tagを書き出しなさい)という命令です。

　そして、「$ga4tag」は「<<<EOM」から「EOM;」の間の文言のことです。

　そう説明されるとそんな風に読めなくもないですよね？

※「php ヒアドキュメント」とググれば、もっとわかりやすい解説が見つかると思います。

※EOMは、頭とお尻が同じ文字列なら、何でもよいです。EOM(End of Message)、EOS(End of String)は、誰にでも通じやすいから使う人が多いのではないでしょうか？

※ちなみに、今回のコードは「?>」の前の行に書き入れるのが無難です。「?>」のペアは最初の行の「<?php」で、中途半端な場所に入れると、間に書かれた他の関数を壊してしまうかもしれないからです。JavaScriptだったら「<script>」で始まり、「/<script>」で終わるみたいなのの、php版の開始と終了です。

最後に

　ずっとブログから離れていて、久しぶりに戻ったら、グーグルアナリティクスがGA4に変わっていました。（大分前に……）

　新しいタグを入れる必要があり、ワードプレスに備わっている関数についての記憶もあいまいになって、headエリアに書き加える方法を調べていたら、「header.phpを子テーマにコピーして、<head>のすぐ近くに書きましょう」みたいなアドバイスが多くて戸惑いました。

　functions.phpに入れたらダメな理由はどこにも書いていなかったので、昔ながらの(?)functions.phpに命令を書く方法で書き入れました。

　他とはすごく違う方法に見えるかもしれないので、phpを書いたことがない人でも、なんとなく意味が分かりながらコピペできるように工夫してみました。

　最後までお読みいただきありがとうございました。

作成者: のろのろ

サイト管理者

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です