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時間ほど経ってからだった。(ほんとにアホ!)

以上。

この投稿へのコメント

コメントはありません。

コメントを残す

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

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

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

トラックバック URL