WordPress テーマ Cocoon にGoogle Tag Managerを設置する方法

WordPress テーマ Cocoon に Google Tag Managerを設置する方法 Cocoon 活用法

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の設定ではなく子テーマを編集して設置する方が分かりやすいと思います。

Cocoonの機能を使用したGTMの設定

WordPress管理画面のCocoon 設定のページを表示し、「アクセス解析」タブをクリックします。Google Tag Manager IDの欄に、IDを入力します。

Cocoonのアクセス解析設定ページにGTMのIDを入力します

Google Tag Manager IDの取得方法

Google Tag Manager IDは、設置コード内に記載されています。(以下の画面の赤アンダーラインの部分)

Google Tag Manager IDコード

Google Tag Manager のアカウントの作り方、コードの取得方法については、以下の記事をご参照下さい。

SimplicityにGoogle Tag Managerでアナリティクスを設置する方法 - ブロギングライフ
Google Tag Managerは、トラフィックの解析を行う各種タグの管理、設置をまとめて行うことができる便利なツールです。SimplicityのサイトにGoogle タグマネージャでアナリティクスを設置する方法を紹介します。

Cocoon子テーマを使用したGoogle Tag Managerのコード設置方法

冒頭で紹介したようにGoogle Tag Managerは、<head>タグ内と<body>直下に設置する2種類のインストールコードがあります。取得方法は、上にリンクを貼っている「SimplicityにGoogle Tag Managerでアナリティクスを設置する方法」の記事をご覧下さい。

以下は、インストールコードが表示されている画面です。

Google Tag Manager のコード

上のスクリプト部のコードは、<head>タグ内のできるだけ上の方に設置することが推奨されています。下のノンスクリプトコードは、<body>の直ぐ下に設置する旨の記載があります。

<head>タグ内にスクリプトコードを設置

WordPress管理メニューの[外観]から「テーマの編集」をクリックします。右側に表示されるテーマファイルの中の”tmp-user”をクリックし、head-insert.php ファイルを選択します。

head-insert.php のコード欄の「ログインユーザーも含めてカウントする場合は以下に挿入」の下にGoogle Tag Managerのスクリプト部のコードを貼り付けます。

head-insert テンプレートファイルにGTMスクリプトコードを貼り付けます

内容を確認後、[ファイルを更新(保存)]を押します。

<body>タグ直下にスクリプトコードを設置

続いてテーマファイルの一覧の中から、tmp-userの下の”body-top-insert.php”をクリックします。このファイルは、<body>タグ直下に挿入するための小テーマのテンプレートファイルです。

コード欄の「ログインユーザーも含めてカウントする場合は以下に挿入」の下にGoogle Tag Managerのノンスクリプト部のコードを貼り付けます。

bodyタグ直下に挿入する子テーマテンプレートにGTMノンスクリプトコードを貼り付けます

内容を確認後、[ファイルを更新(保存)]を押します。

以上で作業完了です。

サイトをAMP化している場合

上記のように子テーマでGoogle Tag Managerのコードを設置したサイトでAMP化も行っている場合は、AMPページにもGoogle Tag Managerのコードを設置する必要があります。

AMPページのGoogle Tag Managerの設定については、以下の記事をご参照下さい。

CocoonのAMPページに子テーマを編集してGoogle Tag Managerを設置する方法
CocoonにGoogle Tag Managerのコードを設置する方法は、大きく分けて、Cocoonの設定機能を使用する方法と子テーマを編集して設置する方法の2種類があります。前者の方が簡単にできます。 <head>タグ...

コメント

タイトルとURLをコピーしました