- 動画の再生速度を３倍４倍にするChromeの拡張機能をYouTubeに使ってみる
Topics
インフォコネクト最新情報
Google Tag Managerを利用してIE閲覧者にブラウザ非対応の表示方法
Google Tag Managerを利用してIE閲覧者にブラウザ非対応の表示方法
この記事は公開から2年以上経過しています。
こんにちは、チーフクリエイターのSHOJIです。
今回はGoogle Tag Manager（以下 Googleタグマネージャー）を利用して、未だに多くの利用者が存在しているInternet Explorer（以下 IE）がブラウザ非対応であること、さらにGoogle ChromeやMicrodoft Edgeといったモダンブラウザのインストールを促す表示をする方法をご紹介します。
下記のような内容を、サイトに訪れたIE閲覧者のみに表示することを目的としていますので、興味ある方はどうぞ最後までお付き合いください！
- \\ 目 次 //
- Googleタグマネージャーで新しくアカウントを作成する
- 使用中のブラウザがIEかどうかを判定するJavaScriptを設定する
- ブラウザがIEだった場合にイベントを発動させるトリガーを設定する
- ブラウザがIEだった場合に表示されるHTMLを設定する
- 公開設定および確認
- サポート終了したInternet Explorerとどう付き合うか
Googleタグマネージャーで新しくアカウントを作成する
① Googleタグマネージャーを開き［アカウントを作成］をクリックします。
②「新しいアカウントの追加』画面にて情報を適宜入力して［作成］をクリックします。
③「Googleタグマネージャー利用規約」確認後［同意］にチェックし［はい］をクリックします。
※Googleタグマネージャー利用規約は英文のため、日本語翻訳してご確認ください。
④「Googleタグマネージャーをインストール」が表示されるので、２つのコードをそれぞれコピーして保存しておきます。
⑤ Googleタグマネージャーで新しく作成したアカウントのワークスペースが表示されます。
これで、②で入力したドメインで使用するタグを作成するためのアカウント準備ができました。
使用中のブラウザがIEかどうかを判定するJavaScriptを設定する
① ワークスペース左の［変数］をクリックします。
②「ユーザー定義変数」項目の［新規］をクリックします。
③［変数の設定］部分をクリックします。
④［カスタムJavaScript］をクリックします。
⑤「変数の設定」画面にて、使用中のブラウザがIEかどうか判定するJavaScriptを入力して、右上の［保存］をクリックします。
See the Pen Untitled by InfoConnect (@infoconnect-inc) on CodePen.
⑥「変数名の変更」画面にて適宜変数名を入力して［保存］をクリックします。
⑦「ユーザー定義変数」項目に設定した変数名が表示されました。
これで、使用中のブラウザがIEかどうかを判定するユーザー定義変数を設定できました。
ブラウザがIEだった場合にイベントを発動させるトリガーを設定する
① ワークスペース左の［トリガー］をクリックします。
②「トリガー」項目の［新規］をクリックします。
③［トリガーの設定］部分をクリックします。
④［DOM Ready］をクリックします。
⑤「トリガーの設定」画面にて［一部のDOM Readyイベント］にチェックを入れます。
⑥ 前項⑥で設定した変数名『isIE』に対して『等しい』『Yes』と条件分岐の設定をした後、右上の［保存］をクリックします。
⑦「トリガー名の変更」画面にて、適宜トリガー名を入力して［保存］をクリックします。
⑧「トリガー」項目に設定したトリガー名が表示されました。
これで、使用中のブラウザがIEだった場合にイベントを発動させるトリガーの設定ができました。
ブラウザがIEだった場合に表示されるHTMLを設定する
① ワークスペース左の［タグ］をクリックします。
②「タグ」項目の［新規］をクリックします。
③［タグの設定］部分をクリックします。
④［カスタムHTML］をクリックします。
⑤「タグの設定」画面にて、ブラウザがIEだった場合に表示されるHTMLを入力します。
※HTML記述内にインラインイメージを設定しています。
インラインイメージ参考：『デベロッパーツールで画像を簡単にBase64にエンコード(変換)する方法』
https://info-con.co.jp/tips/base64_encode/
See the Pen Untitled by InfoConnect (@infoconnect-inc) on CodePen.
⑥ そのまま下にスクロールして「トリガー」部分をクリックします。
⑦「トリガーの選択」画面にて、前項⑦で設定したトリガー名をクリックします。
⑧「トリガー」項目に表示された配信トリガーを確認した後、右上の［保存］をクリックします。
⑨「タグ名の変更」画面にて、適宜タグ名を入力して［保存］をクリックします。
⑩「タグ」項目に設定したタグ名が表示されました。
これで、ブラウザがIEだった場合に表示されるHTMLの設定ができました。
公開設定および確認
① ワークスペース右上の［公開］をクリックします。
②「送信設定」画面にて、適宜バージョン名を入力して［公開］をクリックします。
③「バージョンの概要」画面が表示されれば、Googleタグマネージャーでの設定は完了です。
④ 実際にIEブラウザで設定したイベントが表示されるように、最初の項④で保存しておいた２つのコードを、表示させたいサイト内の規定箇所に実装します。
※コードの保存を忘れた場合、ワークスペース上部の［GTM-XXXXXXX］部をクリックすると再度確認できます。
⑤ 実装後、サイトをIEまたはMicrosoft EdgeのIEモードで表示させて、正しく表示されるかどうか確認します。
これで、設定した通り正しくブラウザ非対応の表示がされれば、すべての設定は完了となります。
サポート終了したInternet Explorerとどう付き合うか
Windows10からは、デフォルトでインストールされているブラウザがMicrosoft Edgeとなり、日本時間の2022年6月16日でInternet Explorerのサポートが終了しました。
最新のモダンブラウザ用に開発された「洗練されたおしゃれなサイト」は、当然ながらIEでは表示されず、サポート終了したセキュリティ面で脅威を抱えるIEへの対応をとりやめる制作会社が多くなってきました。弊社もそのひとつです。
ただし、単に「IEを切り捨てる」だけで本当に良いのでしょうか？
IEを切り捨てることはすなわち、IEユーザーを見捨てるということに他なりません。
ITリテラシーの高い人がそれなりの理由で、IEを使い続けなければならないのであれば救いはありますが、中には古いパソコンを使い続けているITリテラシーの高くない人が存在することも事実。
弊社は画像形式「WebP（ウェッピー）」を制作サイトに取り入れる理由からIEへの対応を終了したのですが、WebPで制作されたサイトをIEユーザーが閲覧すると画像がまったく表示されないため、IEユーザーだけでなくクライアント様にもご迷惑をお掛けしてしまいます。
そのため、Googleタグマネージャーを利用してIE閲覧者にはサイトを表示させず、ブラウザ非対応であることを表示をすると同時に、最新のモダンブラウザをインストールして利用するように促す表示をすることで、IEユーザーとクライアント様に配慮したというわけです。
1%にも満たないとはいえ、弊社サイトへも直近30日で400名近いIEユーザーの方の訪問があるのが現状、単に「切り捨てる」のではなく「新しく安全なものに導く」ことが、これからのサイト制作会社の使命であるとインフォコネクトは考えています。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。