IEからのページアクセスに、ブラウザ対象外の表示をする、GTMの設定方法

GTMの設定は、メモっておかないと速攻忘れるので、備忘録。

古いエンジニアなので、IEセーフティなソースを書いてしまうが、必須の外部サービスがIE非対応だと、門前払いもしかたない、ケースもある。

ソースを変更することく、GTMで、サイト全体に一発で対応する方法。

Step1. IEからのアクセスかどうか、判断するJavascript

function isIE() {
   var userAgent = window.navigator.userAgent.toLowerCase();
   if ( userAgent.indexOf( 'msie' ) !== -1 || userAgent.indexOf( 'trident' ) !== -1 ) {
     return 'Yes';
   }
   return 'No';
 }

GTMの変数に、カスタム JavaScriptを追加。変数名は、「isIE」

Step2. IEからのアクセスを検知

GTMのトリガーに、IEからのアクセス検知のトリガーを追加する。

なるべく速いタイミングで検知したいので、DOM Readyを使用

Step3. IEからのアクセス時、ブラウザー対象外のポップアップを表示する

GTMのタグに、カスタムHTMLで、ポップアップを追加

 <style>
        .ie_alert_561205360{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            text-align: center;
            padding: 10% 0;
            z-index: 99999999999;

            display: table;
        }
        .ie_alert_561205360_body{
            overflow: hidden;
        }
        .ie_alert_561205360 .ie_alert_contents {
            display: table-cell;
            vertical-align: middle;
        }
        .ie_alert_561205360 .ie_alert_site_logo{
            display: block;
            margin: 0 auto 0 auto;
            height: auto;
            font-size: 4rem;
            font-weight: bold;
        }
        .ie_alert_561205360 span{
            display: block;
            color: #000000;
            font-size: 30px;
            padding: 30px 0 ;
        }
        .ie_alert_561205360 p{
            font-size: 16px;
            color: #000000;
        }
        .ie_alert_561205360 a{
            display: inline-block;
            font-size: 16px;
            margin-top: 20px;
            margin-bottom: 40px;
            padding: 8px 80px;
            border: solid 1px #000000;
            color: #000000;
        }
        .ie_alert_561205360 a:hover{
            color: #000;
            background: rgba(255,255,255,0.7);
        }
    </style>
<script>
        (function(){
                    var body = document.body;
                    var ieDiv = document.createElement('div');
                    body.classList.add('ie_alert_561205360_body');
                    ieDiv.classList.add('ie_alert_561205360');

                    ieDiv.innerHTML = '<div class="ie_alert_contents"><span class="ie_alert_site_logo">SITE LOGO</span><span>ご利用の環境はサポートされていません。<p><b>SITE NAME</b>では、あなたがご利用中のブラウザ <b>Internet Explorer</b>は、サポートされていません。以下のブラウザからご利用ください。</p><p style="padding-top: 20px"><b>Google Chrome</b> / <b>Microsoft Edge</b></p><p><a href="https://www.google.co.jp/chrome/" target="_blank" rel="noreferrer noopener"><b>Google Chrome</b> Download</a>  <a href="https://www.microsoft.com/edge" target="_blank" rel="noreferrer noopener"><b>Microsoft Edge</b> Download</a></p></div>';
                    body.appendChild(ieDiv);

        })();


    </script>