桃源老師のつぶやきについて > ソフトウェア > WordPressウェブサイトへのGoogle Tag Managerスニペットの埋め込み方法

WordPressウェブサイトへのGoogle Tag Managerスニペットの埋め込み方法

主題
WordPressで作ったサイトにGoogle Tag Managerを設置する上で必要となる埋め込みコードスニペットの設置場所を説明する。

対象

  • WordPressで、テーマのカスタマイズに子テーマを用いていること。
  • 子テーマのカスタマイズをfunctions.phpを用いていること。

背景
一昨日、Google Tag Managerを使ってはどうかというメールが届いた。しかし詳細をクリックしてもベトナム語（！）のページが開くだけで、Googleさん何やってんの状態で放置していた。
今日になってGoogle Tag Managerとはなんぞやと検索をかけたら、昨日今日の話ではないことが分かった。そういった経緯を含めた説明は、多少設置手順の図解が古いが、このサイトが分かりやすかった。少なくともGoogleの公式ヘルプよりは、数十倍分かりやすい。
さて、Google Tag Managerの設置には、今までAnalyticsでWebサイトに埋め込んでいたコードスニペットを差し替える必要がある。静的なサイトは良い（面倒だが）が、WordPressのような動的サイトはどうなるんだ（？）という疑問がすぐに生じる。本稿の目的は、その疑問に答えることにある。

子テーマのfunctions.phpに次のコードを追加する。

  1. <head>タグ用 

    /* Google Tag Manager Header */
add_action('wp_head', 'google_tag_manager_header');
function google_tag_manager_header(){
?>
<!-- Google Tag Manager -->
/* ここにコードを貼り付ける */
<!-- End Google Tag Manager -->
<?php
};

  2. <body>タグ用 

    /* Google Tag Manager Body */
add_action( 'wp_body_open', 'google_tag_manager_body');
function google_tag_manager_body(){
?>
<!-- Google Tag Manager (noscript) -->
/* ここにコードを貼り付ける */
<!-- End Google Tag Manager (noscript) -->
<?php
};

  3. スニペットを貼り付けたら、FTPソフトでfunctions.phpをアップロードする。それ以降は先のサイトに従えば良い。

おまけ
おまけと言うより、蛇足である。筆者なGoogle Tag Managerの実体が設置後もつかめなかった。参考にしたページでも、例として説明されているのは、Analyticsのタグ設置で、だったらこれはAnalyticsの置き換えなのか（？）などと考えてしまい、どこを触ったらAnalyticsのデータが出てくるんだと探したりした。（アホ！）
結局、自分でも解説したスニペットの差し替えで、Analyticsを含めた多様なタグの管理ができる…そういう道具だと悟ったのは、2時間ほど経ってからだった。（ほんとにアホ！）

以上。

関連記事

macOSアップデート直後の英語表記画面を治す

現行OSである、macOS Mojaveでも、効果があることを確認した。（2019.02.10) OS X El Capitan以降の変な癖を治す方法を書き留めておく。変な癖とは、アップデート直後のログイン画面や再起動/ […]

macOSのmd5出力を整形する

macOSのMD5（Message Digest Algorithm 5）出力整形について書きたい。未だにMD5かセキュリティ云々という人は対象外。 macOSにもmd5を計算するコマンドはある。そのままmd5という名前 […]

この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL