Googleタグマネージャーは、ウェブサイトのタグ管理を簡単にする便利なツールです。
特に、カスタムHTMLタグを使うことで、直接サイト内のHTMLコードを操作することなく、Googleタグマネージャーの管理画面から追加したいHTMLコードを実装することができます。
しかし、はじめての方には少し難しく感じるかもしれません。
この記事では、Googleタグマネージャーの基本からカスタムHTMLタグの設定方法まで、わかりやすく解説します。
専門用語をできるだけ避け、具体的な手順や例を挙げて説明しますので、安心して読み進めてください。
これを読めば、誰でも簡単にGTMを使ったタグ管理ができるようになります。
GTMでカスタムHTMLタグを作成・設定する方法
カスタムHTMLタグの作成手順
カスタムHTMLタグは、追加したいHTMLコードを、サイト操作をおこなわずに実装できるタグです。
これを使うと、Googleタグマネージャー（GTM）を介して、任意のHTMLをサイトに埋め込むことができます。
よく使われるケースでは、例えば何らかのサービス（ヒートマップツールの導入など）を利用する際に「サイト内のHTMLにコードを追加してください」といった指示がある場合に役立ちます。
| ステップ | 内容 |
|---|---|
| 1 | GTMにログイン |
| 2 | コンテナを選択 |
| 3 | 新しいタグを作成 |
| 4 | タグの名前を入力 |
| 5 | タグの種類を「カスタムHTML」に設定 |
| 6 | HTMLコードを入力 |
| 7 | トリガーを追加 |
| 8 | タグを保存 |
| 9 | バージョンを公開 |
これらのステップを踏むことで、カスタムHTMLタグを効果的に作成し、サイトに追加することができます。
- コンテナを選択：Googleタグマネージャーにアクセスし管理するサイトのコンテナを選びます。コンテナとは、タグを管理するための箱のようなものです。
- 新しいタグを作成：「タグ」セクションに移動し、「新規」をクリックします。
- タグの名前を入力：タグの名前をわかりやすいものに設定します（例：ヒートマップツールのコード）。
- タグの種類を選択：「タグの設定」をクリックし、「カスタムHTML」を選びます。
- HTMLコードを入力：カスタムHTMLタグに必要なHTMLコードを入力します。例えば、以下のようなコードです。
<!-- PtengineTag --><script src="https://js.ptengine.jp/xxxx.js"></script><!-- End PtengineTag -->
GTMのタグを公開して動かす方法
作成したカスタムHTMLタグをサイトに公開して動かすためには、以下の手順を行います。
- タグ設定の保存：入力したHTMLコードを確認し、「保存」をクリックします。
- トリガーを追加：タグが発動するタイミングを設定するために、「トリガー」を追加します。「すべてのページ」や「特定のページのみ」など、適切なトリガーを選びます。
ヒートマップツールの場合は全ページで動かすケースが多いため、今回は「All Pages」を設定します。
- タグを保存：トリガーを設定したら、「保存」をクリックしてタグの設定を完了します。
- タグを公開：右上の「公開」をクリックし、タグの変更をサイトに反映させるために新しいバージョンを公開します。
タグの動作確認方法
タグの動作確認は、プレビューモードかGA4デバッグビューにておこないましょう。
- プレビューモード：「プレビューモード」に切り替えて、実際にタグが正しく動作するかを確認します。プレビューモードでは、タグがどのように動作するかリアルタイムで確認できます。
- GA4のデバッグビュー：GA4のデバッグビューを使用してタグの動作を確認することもできます。デバッグビューは、パラメータ内容も細かく表示してくれるので便利です。
トリガー設定とカスタムHTMLの発火条件
トリガーとは何か？
トリガーとは、特定の条件が満たされたときにタグが発動（実行）される仕組みです。
例えば、ユーザーがページを訪れた時や、特定のボタンをクリックした時にタグを発動させることができます。
トリガーは、Googleタグマネージャー（GTM）でタグを管理する上で重要な役割を果たします。
代表的なトリガーの種類
- ページビュー：ページが読み込まれたときにタグを発動させます。
- クリック：ユーザーが特定の要素をクリックしたときにタグを
- フォーム送信：ユーザーがフォームを送信したときにタグを発動させます。
- スクロール：ユーザーがページをどれくらいスクロールしたかに基づいてタグを発動させます。
カスタムHTMLタグにトリガーを設定する方法
カスタムHTMLタグにトリガーを設定することで、特定の条件が満たされたときにタグが発動するようにできます。
以下は、トリガーを設定する手順です。
- 新しいトリガーを作成：「新規」をクリックし、トリガーの設定画面に移動します。
- トリガーの名前を入力：トリガーの名前を入力します。例えば、「ボタンクリック」としましょう。
- トリガーの種類を選択：トリガーの種類を選択します。例えば、「クリック」の中の「すべての要素」を選びます。
- トリガーの詳細を設定：トリガーの詳細設定を行います。例えば、「すべてのクリック」か「一部のクリック」かを選びます。特定の要素の場合は、その要素の識別子（IDやクラス）を指定します。
- トリガーを保存：設定が完了したら、「保存」をクリックします。
発火条件の設定例
発火条件とは、トリガーが実際にタグを発動させるための具体的な条件です。いくつかの設定例を紹介します。
ページビューの発火条件
条件:
すべてのページビューで発動
設定方法:
- トリガーの種類で「ページビュー」を選びます。
- 「すべてのページビュー」を選択します。
クリックの発火条件
条件:
特定のボタンがクリックされたときに発動
設定方法:
- トリガーの種類で「クリック」を選びます。
- 「特定の要素のクリック」を選びます。
- 要素の識別子（例えば、ボタンのID）を指定します。
<button id="special-button">クリックしてね</button>GTMの設定で「IDがspecial-buttonの要素」がクリックされた場合に発動するように設定します。
フォーム送信の発火条件
条件:
特定のフォームが送信されたときに発動
設定方法:
- トリガーの種類で「フォーム送信」を選びます。
- 「特定のフォームの送信」を選びます。
- フォームの識別子（例えば、フォームのID）を指定します。
<form id="signup-form">
<input type="text" name="email">
<button type="submit">登録する</button>
</form>GTMの設定で「IDがsignup-formのフォーム」が送信された場合に発動するように設定します。
以下は、トリガーの種類と発火条件の例をまとめた表です：
| トリガーの種類 | 発火条件 | 設定例 |
|---|---|---|
| ページビュー | すべてのページビュー | ページ読み込み時 |
| クリック | 特定のボタンのクリック | IDがspecial-buttonのボタン |
| フォーム送信 | 特定のフォームの送信 | IDがsignup-formのフォーム |
これらの手順を踏むことで、カスタムHTMLタグに適切なトリガーと発火条件を設定し、サイト上で望むタイミングでタグを発動させることができます。
トリガーを正しく設定することで、サイトのパフォーマンスやUXを向上させることができます。
以下は、カスタムHTMLタグを使った改善例をまとめた表です：
| 改善例 | 目的 | 効果 |
|---|---|---|
| ポップアップの表示 | ユーザーの注意を引く | 特定のオファーやメッセージを効果的に伝える |
| スクロール率改善 | ページ読み込み進度の視覚化 | 読み進める意欲を高める |
| フォームの最適化 | 登録率の向上 | 入力途中での離脱を減らす |
| ユーザーレビューの表示 | ユーザーの信頼を得る | 新規ユーザーの信頼を得やすくする |
| 限定オファーの表示 | 購買意欲の刺激 | 購入行動を促進する |
コンバージョン率を高めるために、これらの改善策をぜひ試してみてください。
Googleタグマネージャー(GTM)でカスタムイベントを設定する方法については下記で詳しく紹介しています。
カスタムHTMLタグのトラブルシューティングと解決方法
カスタムHTMLタグが動作しない原因
カスタムHTMLタグが期待通りに動作しない場合、いくつかの原因が考えられます。
主な原因を以下に示します。
コードのエラー
原因: HTML、CSS、JavaScriptのコードに誤りがあると、タグが正しく動作しません。
例: タグを閉じる記号が欠けている、変数名が間違っている、など。
トリガーの設定ミス
原因: トリガーの設定が正しくない場合、タグが発動しません。
例: 特定のページビューで発動するように設定したつもりが、すべてのページビューで発動するように設定してしまった。
競合するタグ
原因: 他のタグと競合している場合、カスタムHTMLタグが正しく動作しないことがあります。
例: 同じページに複数のJavaScriptコードがあり、それぞれが干渉し合っている。
よくあるトラブルとその解決策
カスタムHTMLタグに関するよくあるトラブルと、その解決策を紹介します。
トラブル1: タグが全く動作しない
解決策:
- コードをチェックする：
HTML、CSS、JavaScriptのコードにエラーがないか確認します。
ブラウザの開発者ツールを使うと便利です。 - トリガーの設定を確認する：
トリガーが正しく設定されているか確認します。
特定の条件に合っているかどうかを確認しましょう。 - ブラウザのキャッシュをクリアする：
キャッシュが古いデータを保持している場合、最新のタグが反映されないことがあります。
キャッシュをクリアしてから再度確認します。
トラブル2: タグが一部のページでしか動作しない
解決策:
- トリガーの条件を見直す：
トリガーの条件が特定のページにのみ適用されるように設定されていないか確認します。
条件を広げるか、正しい条件へと修正します。 - URLの一致条件を確認する：
トリガーのURL一致条件が正しく設定されているか確認します。
部分一致や正規表現を使う場合は特に注意が必要です。
トラブル3: タグが遅延して発動する
解決策:
- コードの最適化：
JavaScriptコードを最適化して、不要な遅延を取り除きます。
非同期でロードするスクリプトを見直します。 - タグの順序を調整する：
タグの発動順序を見直して、優先度を調整します。
重要なタグが先に発動するように設定します。
問題が発生した場合の対応方法
カスタムHTMLタグに問題が発生した場合の対応方法を具体的に説明します。
ステップ1: 問題の特定
- ブラウザの開発者ツールを使用：
デベロッパーツールを開いて、コンソールタブを確認します。
エラーメッセージが表示されている場合、その内容を確認します。 - GTMのプレビューモードを活用：
GTMのプレビューモードを使って、タグがどのように発動しているかを確認します。
プレビューモードでは、タグの発動状況やトリガーの状態をリアルタイムで確認できます。
ステップ2: エラーの修正
- コードの修正：
エラーメッセージに基づいて、コードを修正します。
具体的な行番号やエラー内容を参考に、問題の箇所を特定します。 - トリガーの再設定：
トリガーが正しく設定されていない場合、再設定します。
特定の条件を満たすようにトリガーを修正します。
ステップ3: 再確認
- タグを保存してプレビュー：
修正後、タグを保存してプレビューモードで再確認します。
問題が解決したかどうかを確認します。 - キャッシュをクリア：
ブラウザのキャッシュをクリアして、最新のタグが反映されるようにします。
問題が解決し、タグが正しく動作することを確認したら、新しいバージョンを公開します。
これらの手順を踏むことで、カスタムHTMLタグに関する問題をすみやかに解決し、サイトの機能を理想通りの挙動へと動かすことができます。
カスタムHTMLタグが正しく動作しない場合は、これらのトラブルシューティングを試してみてください。
GTMデータレイヤーの基礎と使い方については下記で詳しく紹介しています。
まとめ
Googleタグマネージャーを使ってカスタムHTMLタグを設定することで、ウェブサイトに様々な機能を追加することができます。
この記事では、カスタムHTMLタグの作成手順、追加方法、トリガー設定、そしてよくあるトラブルとその解決策を解説しました。
まず、カスタムHTMLタグを作成するためには、GTMにログインし、コンテナを選んで新しいタグを作成します。
タグに必要なHTMLコードを入力し、トリガーを設定します。
トリガーとは、タグが発動する条件のことです。正しいトリガーを設定することで、タグが適切なタイミングで発動します。
次に、カスタムHTMLタグを使ってウェブサイトを改善する具体例として、ポップアップ表示やスクロール率の改善、フォームの最適化などを紹介しました。
カスタムHTMLタグが動作しない原因として、コードのエラーやトリガー設定のミス、他のタグとの競合が考えられます。
これらのトラブルに対処するための手順として、問題の特定、エラーの修正、再確認、そして公開の手順を詳しく説明しました。
これらの手順を踏むことで、カスタムHTMLタグを正しく設定され、ウェブサイトにて動作させることができます。
何か問題が発生した場合は、ここで紹介したトラブルシューティングの方法を試してみてください。
