立入|ITブログ
STUDIOでタグマネージャーからGoogleアドセンスを設定する

 STUDIOではGoogle AnalyticsやGoogle Search Console等、いくつかのツールとの連携機能が標準で準備されています。そして標準機能で準備されていない機能については、Googleタグマネージャーを経由して設定を行う事になります。

Googleタグマネージャーに対してあまり馴染みがなかったので、今回はGoogleタグマネージャーの概要と手順をまとめてみました。

GoogleタグマネージャーでWEBページにHTMLを挿入できる

元々Googleタグマネージャーという名前はよく聞いていましたが、「タグ」というものが何か今一つイメージが付いていませんでした。

WEBの世界において「タグ」というのは、何かを表示・実行するためのHTMLコードの事を言うらしいです。

単純な画像やテキストを表示するのもHTMLのタグですし、Googleアドセンスを挿入したり、アナリティクスにデータを送信するためのHTMLもタグです。いろんなHTMLをWEBページに挿入できる上、一括で管理する事もできるのがGoogleタグマネージャだと理解しました。

GoogleアドセンスをWEBページに表示するためにもタグ=HTMLのコードをWEBページに追記する必要があります。しかしSTUDIOはWEBページのHTMLを直接編集できませんから、Googleタグマネージャーでタグを追加する形でGoogleアドセンスを表示する事になるのです。

GoogleアドセンスをSTUDIOで表示するには?

ではGoogleアドセンスをSTUDIOで表示するにはどうしたらいいのでしょうか?

前提として下記の条件を満たす必要があります。

Googleアカウントを持っている

GoogleアドセンスやGoogleタグマネージャーの利用には、Googleアカウントの利用が必要です。

Googleアドセンスの審査に通っている

Googleアドセンスを表示できるのはWEBサイトが審査に通ってからです。

STUDIOでStarterプラン以上を契約している

まず前提として、対象のSTUDIOのプロジェクトでStarterプラン以上を契約している必要があります。STUDIOとGoogleタグマネージャーの連携機能が、無料では開放されていないためです。

Googleアドセンスを設置する方法

Starterプラン以上を契約している場合、下記の5つの手順でGoogleアドセンスの設置が可能です。

  1. Google広告(アドセンス)のHTMLタグを取得する
  2. GoogleタグマネージャーのGTMコードを取得する
  3. STUDIOでGTMコードを登録する
  4. GoogleタグマネージャーでHTMLタグを登録する
  5. 動作確認を行う

それぞれの手順について、詳細を確認していきます。

1. Google広告(アドセンス)のHTMLタグを取得する

  1. Google広告へログインする
  2. 「広告>サイトごと」を開く
  3. 「コードを取得」を押す
  4. 広告用コードをコピーする

2. GoogleタグマネージャーのGTMコードを取得する

  1. Googleタグマネージャーへログインする
  2. 「アカウントを作成」を押す
  3. 各項目を入力してアカウントを作成する
  4. ホーム画面上部にある「GTM-xxxxxxx」のコードをコピーする

3. STUDIOでGTMコードを登録する

  1. STUDIOでプロジェクトの管理画面を開く
  2. AppsでGoogle Tag Managerを選択する
  3. 「GTM-xxxxxxx」のコードを貼り付ける

4. GoogleタグマネージャーでHTMLタグを登録する

  1. Googleタグマネージャーで「新しいタグを追加」を開く
  2. タグの名前を任意で設定
  3. 「タグの設定」を開く
  4. 「カスタムHTML」を検索して選択
  5. 広告用コードを貼り付ける
  6. 「トリガー」を開く
  7. 「All Pages」を選択する
  8. 保存する

5. 動作確認を行う

  1. 「プレビュー」を開く
  2. 公開したサイトのURLを入力して接続
  3. Finish
  4. Summaryの「Tags Fired」にタグの名前が表示されている事を確認する

注意点

Googleアドセンスの反映には一定の時間が必要です。動作確認ができても、WEBページへすぐに広告が表示されない場合があるので、しばらく空けてから確認した方が良いでしょう。