WordPress テーマCocoonでは、Simplicityでは備えていなかったGoogle Tag Managerのコード設置機能を標準で備えています。Cocoonの機能を利用する簡単に設定することができます。
さらに、Cocoonが提供する子テーマでも、Google Tag Manager（GTM)のコードを設置することができます。
GTMの設置：Cocoonの設定 vs 子テーマを編集
Google Tag Managerは、<head>タグ内に設置するスクリプト部と<body>タグの直下に設置するノンスクリプト部の2種類のコードをページ内に組み込むことで動作します。AMP化したサイトでは、AMP用のGTMのコードをそれぞれAMPページの<head>タグ内と<body>タグ直下に設置する必要があります。
CocoonによるGoogle Tag Managerのコード設置の特徴
Cocoonでは、設定ページにGoogle Tag ManagerのIDを入力すると、自動的にスクリプト部とノンスクリプト部のコードを生成して、ページ内の所定の場所に組み込む機能を備えています。
さらに、AMP化している場合は、AMP用のGoogle Tag Managerのコードも自動的に生成して、所定の位置に組み込むようになっています。
ユーザーが設置のためにすることは、設定ページにGTMのIDを入力するだけで、後はCocoonの方で設置作業を行なってくれます。
Cocoon子テーマによるGTM設置
Cocoonの設定を使う方が簡単ですが、子テーマにマニュアルで設置することも簡単にできます。<head>タグや<body>タグにコードを設置することで動作する機能・サービスは、Google Tag Manager以外にもあります。まとめて設置して管理したいと考える場合には、子テーマによる設置が基本的に適しています。
以下、<head>タグ内や<body>タグ直下にコードを設置して使用する機能の例です。
- Google アナリティクス
- Google タグマネージャー
- AdSense 自動広告
- DFP (DoubleClick for Publisher)
- Facebook Open Graph
- Facebook Pixel
- Facebook ソーシャルプラグインで使用するSDK
- Twitter カード
上記機能の内、Googleアナリティクス（含むGTM)、Facebook Open Graph、（Twitter カード）は、サイト運営で実質的に必須となる機能です。これら重要度が高い機能は、Cocoonの方で標準でサポートしています。
AMPページでのユーザー動向は通常ページと異なるところがあるため、より正確なユーザーのアクセス動向を把握するためには、アナリティクスのプロパティは通常ページと異なるAMP専用のプロパティを使用することをGoogleは推奨しています。
AMPページに異なるアナリティクスのプロパティを使用する場合は、Cocoonの設定ではなく子テーマを編集して設置する方が分かりやすいと思います。
通常ページとAMPページで、同じプロパティを使用するか別のプロパティを使用するかは、それぞれ一長一短があります。
Cocoonの機能を使用したGTMの設定
WordPress管理画面のCocoon 設定のページを表示し、「アクセス解析」タブをクリックします。Google Tag Manager IDの欄に、IDを入力します。
Google Tag Manager IDの取得方法
Google Tag Manager IDは、設置コード内に記載されています。（以下の画面の赤アンダーラインの部分）
Google Tag Manager のアカウントの作り方、コードの取得方法については、以下の記事をご参照下さい。
Cocoon子テーマを使用したGoogle Tag Managerのコード設置方法
冒頭で紹介したようにGoogle Tag Managerは、<head>タグ内と<body>直下に設置する2種類のインストールコードがあります。取得方法は、上にリンクを貼っている「SimplicityにGoogle Tag Managerでアナリティクスを設置する方法」の記事をご覧下さい。
以下は、インストールコードが表示されている画面です。
上のスクリプト部のコードは、<head>タグ内のできるだけ上の方に設置することが推奨されています。下のノンスクリプトコードは、<body>の直ぐ下に設置する旨の記載があります。
<head>タグ内にスクリプトコードを設置
WordPress管理メニューの［外観］から「テーマの編集」をクリックします。右側に表示されるテーマファイルの中の”tmp-user”をクリックし、head-insert.php ファイルを選択します。
head-insert.php のコード欄の「ログインユーザーも含めてカウントする場合は以下に挿入」の下にGoogle Tag Managerのスクリプト部のコードを貼り付けます。
内容を確認後、［ファイルを更新（保存）］を押します。
<body>タグ直下にスクリプトコードを設置
続いてテーマファイルの一覧の中から、tmp-userの下の”body-top-insert.php”をクリックします。このファイルは、<body>タグ直下に挿入するための小テーマのテンプレートファイルです。
コード欄の「ログインユーザーも含めてカウントする場合は以下に挿入」の下にGoogle Tag Managerのノンスクリプト部のコードを貼り付けます。
内容を確認後、［ファイルを更新（保存）］を押します。
以上で作業完了です。
サイトをAMP化している場合
上記のように子テーマでGoogle Tag Managerのコードを設置したサイトでAMP化も行っている場合は、AMPページにもGoogle Tag Managerのコードを設置する必要があります。
AMPページのGoogle Tag Managerの設定については、以下の記事をご参照下さい。
コメント