Webページの右下に表示されるバナーアイコン（例えば、チャットボットや料金シミュレーションなど）は、ユーザーの体験を向上させるためによく使用されます。しかし、場合によっては、特定のページではこれらのアイコンを非表示にしたいことがあります。この記事では、Google タグマネージャーを活用して特定のページでバナーアイコンを非表示にする方法について解説します。
Google タグマネージャーでバナーアイコンの表示を制御する
Google タグマネージャー（GTM）を使用すると、Webページ上の特定の要素（ここではバナーアイコン）を特定の条件下で表示・非表示にすることができます。まずは、GTMを利用して、条件に基づいてバナーアイコンを制御する方法について説明します。
1. GTMで新しいトリガーを設定する
最初に、特定のページでバナーアイコンを非表示にするために、新しいトリガーを作成します。トリガーとは、特定のアクションや条件に基づいてタグを発火させる仕組みです。例えば、「ANAのページの右下に表示されるバナーアイコンを非表示にしたい」場合、特定のURLパターンやページでの条件に基づいてトリガーを設定します。
1. GTMダッシュボードにアクセスし、「トリガー」を選択。
2. 新しいトリガーを作成し、「ページURL」や「ページパス」などの条件に基づいて非表示にしたいページを設定します。2. CSSでバナーアイコンを非表示にする
次に、バナーアイコンを非表示にするためのCSSコードを設定します。GTMを利用して、特定の条件が満たされた場合に、バナーアイコンの表示を制御するためにCSSを使います。例えば、`display: none;`を適用することで、指定した要素を非表示にすることができます。
1. GTMで「タグ」を選択し、新しいタグを作成。
2. 「カスタムHTMLタグ」を選び、以下のCSSコードを追加。
<style>
#banner-icon { display: none; }
</style>3. バナーアイコンを特定のページで非表示にする条件を設定する
最後に、作成したトリガーをGTMタグに適用します。これにより、特定のページにアクセスした場合にのみ、バナーアイコンが非表示になります。
1. タグ設定画面で「トリガー」を選択。
2. 先ほど作成したトリガー（ページURL条件など）を選択し、タグの発火条件として設定します。まとめ
Google タグマネージャーを使用することで、特定のページでバナーアイコンを非表示にすることができます。この方法を使えば、ユーザーの体験を向上させつつ、特定のページで不必要な要素を排除することができます。さらに、GTMを使えば、コードを直接触ることなく、簡単にWebページの要素を管理できるため、非常に便利です。
コメント