Google Tag Manager (Google タグマネージャー)で独自のタグを出力する

Google Tag Manager (Google タグマネージャー)で独自のタグを出力する手順を紹介します。

概要

こちらの記事ではGoogle Tag Manager を利用してGoogle Analyticsのタグを配置する手順を紹介しました。 この記事では、独自のタグをGoogle Tag Managerを利用して配置する手順を紹介します。

手順

タグの作成

コンテナのページを開きます。左側のメニューの[タグ]の項目をクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像1

タグの一覧が表示されます。右側のエリアの右上の[新規]ボタンをクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像2

タグの作成ダイアログがウィンドウ右側にスライドイン表示されます。
[タグの設定]のエリアをクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像3

[タグタイプを選択]ダイアログが表示されます。[カスタム]のセクションの[カスタム HTML]をクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像4

[タグの設定]画面が表示されます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像5

[HTML]のテキストボックスに設置したいタグを入力します。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像6

下にスクロールし、トリガーのエリアをクリックします。[トリガーの選択]ダイアログが表示されます。 今回は[All Pages]の項目をクリックして選択します。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像7

トリガーが選択されました。入力後ページ右上の[保存]ボタンをクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像8

タグが作成できました。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像9

動作確認

[プレビュー]ボタンをクリックします。Tag Assistantの画面が表示されます。 [Your website's URL]のテキストボックスにGoogle Tag Managerを配置してあるURLを入力します。入力後[Connect]ボタンをクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像10

接続処理が実行され、Connected!のメッセージが表示されます。[Continue]ボタンをクリックしてダイアログを閉じます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像11

[Tags Fired]の項目を確認します。先ほど作成した"MyTag"の項目が表示されていることが確認できます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像12

ページ側を確認します。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像13

開発者ツールでHTMLの要素を確認します。Bodyタグの最後にGoogle Tag Managerのカスタム HTMLのタグで 設定したタグが配置されていることが確認できます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像14

公開設定

タグマネージャーの画面に戻り右上の[公開]ボタンをクリックします。
下図の公開画面が表示されます。[バージョン名]にバージョンの名称を入力し、[バージョンの説明]に更新内容などのメッセージを 入力します。入力後ページ右上の[公開]ボタンをクリックします。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像15

公開設定が実行されます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像16

公開が完了すると下図の画面が表示されます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像17
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像18

Google Tag Managerを配置したページにアクセスし開発ツール等で要素を確認します。 Google Tag Managerで作成したカスタム HTMLのタグに設定したHTMLが表示されていることが確認できます。
Google Tag Manager (Google タグマネージャー)で独自のタグを出力する:画像19

独自のHTMLタグをタグマネージャーを利用して設置できました。


AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2023-12-01
Copyright © 1995–2025 iPentec all rights reserverd.