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

概要

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

手順

タグの作成

コンテナのページを開きます。左側のメニューの[タグ]の項目をクリックします。


タグの一覧が表示されます。右側のエリアの右上の[新規]ボタンをクリックします。


タグの作成ダイアログがウィンドウ右側にスライドイン表示されます。
[タグの設定]のエリアをクリックします。


[タグタイプを選択]ダイアログが表示されます。[カスタム]のセクションの[カスタム HTML]をクリックします。


[タグの設定]画面が表示されます。


[HTML]のテキストボックスに設置したいタグを入力します。


下にスクロールし、トリガーのエリアをクリックします。[トリガーの選択]ダイアログが表示されます。 今回は[All Pages]の項目をクリックして選択します。


トリガーが選択されました。入力後ページ右上の[保存]ボタンをクリックします。


タグが作成できました。

動作確認

[プレビュー]ボタンをクリックします。Tag Assistantの画面が表示されます。 [Your website's URL]のテキストボックスにGoogle Tag Managerを配置してあるURLを入力します。入力後[Connect]ボタンをクリックします。


接続処理が実行され、Connected!のメッセージが表示されます。[Continue]ボタンをクリックしてダイアログを閉じます。


[Tags Fired]の項目を確認します。先ほど作成した"MyTag"の項目が表示されていることが確認できます。


ページ側を確認します。


開発者ツールでHTMLの要素を確認します。Bodyタグの最後にGoogle Tag Managerのカスタム HTMLのタグで 設定したタグが配置されていることが確認できます。

公開設定

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


公開設定が実行されます。


公開が完了すると下図の画面が表示されます。



Google Tag Managerを配置したページにアクセスし開発ツール等で要素を確認します。 Google Tag Managerで作成したカスタム HTMLのタグに設定したHTMLが表示されていることが確認できます。


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