【EFOツール不要】フォーム離脱防止のためのポップアップをGoogleタグマネージャーだけで実装

2021年9月15日 09:58

今回はECサイトやサービスサイトに必ずあるといっても過言ではないフォームのページで、離脱を防ぐためにEFOツールを使わずにGoogleタグマネージャーだけで離脱防止を実現します。
EFOツールを導入を検討しようか悩んでいるが、効果は本当にあるのか？と、お悩みの方に最適です。

実装の前に、ページ離脱の種類について整理

１）ブラウザの戻るボタンでページを離れる
２）ブラウザのタブを閉じてサイトを離れる

前述の通り、ブラウザには大きく分けて２つの離脱方法があります。今回は「ブラウザの戻るボタンでページを離れる」動作を対象に、ブラウザの戻るボタンをGoogleタグマネージャーで制御し、フォームのページを開いたユーザーがブラウザの戻るボタンを押した際にポップアップを表示させてみようと思います

実装方法

今回実装するカスタムHTMLはこちらです。

少々長いのですが、大きく3つのことが書いてあります。

➀HTML部（<div>で囲まれたエリア。表示する内容。）
②CSS部（<style>で囲まれたエリア。表示する要素のデザイン。）
③Script部（<script>で囲まれたエリア。表示する要素の動き。）

デザインなどサイトのトンマナに合わせて変更したいときは②CSS部を変更してください。

<div id="gtm__modal-wrapper">
<div id="gtm__modal-overlay"></div>
<div class="gtm__modal-content">
<p>入力が途中のようですが<br>本当にページを閉じますか？</p>
<div class="gtm__modal-inner">
<button id="gtm__modal-back-btn">前のページに戻る</button>
<button id="gtm__modal-continue-btn">入力を続ける</button>
</div>
</div>
</div>
<style>
/* ポップアップ */
.gtm__modal-content {
 display:none;
 width:80vw;
 background:#fff;
 padding:20px;
 position: fixed;
 z-index: 9999;
 text-align: center;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 border-radius:8px;
 box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);
}
 #gtm__modal -wrapper {
 display:none;
} #gtm__modal -wrapper.js-enable {
 display: block;
} #gtm__modal -wrapper.js-enable .gtm__modal-content {
 display:block;
}

.gtm__modal-content br {
 display:none;
}
.gtm__modal-inner {
 display:flex;
 margin-top: 20px;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
}

.gtm__modal-inner button {
 padding:10px;
 width: auto;
 background:#efefef;
}
.gtm__modal-inner #gtm__modal -continue-btn {
 background: #C24444 ;
 color: #fff ;
 font-weight:bold;
 flex: 1;
 margin-left: 15px;
} #gtm__modal -wrapper.js-enable #gtm__modal -overlay {
 display:block;
}
/* 背景色 */ #gtm__modal -overlay {
 display:none;
 background:rgba(0,0,0,0.25);
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 999;
 top:0;
 right:0;
 bottom:0;
 left:0;
}

@media screen and (min-width: 768px) {
 .gtm__modal-content {
   width:auto;
   max-width: 500px;
 }
}

@media screen and (max-width: 768px) {
 .gtm__modal-content br {
   display:inline;
 }
 .gtm__modal-inner {
   flex-direction:column;
 }
 .gtm__modal-inner button {
   width: 80%;
 }
 .gtm__modal-inner #gtm__modal -continue-btn  {
   margin-top: 20px;
   margin-left: 0;
 }
}


</style>
<script>
"history" in window && (function (win, doc, hist, loc) {
 //ポップアップ非表示の判定
 var flg = false;
 var HASH_STR = "#enblback";
 var hash = loc.hash;
 var ref = doc.referrer;

 var addHistory = function () {
   hist.pushState(null, null, loc.href);
   hist.replaceState(null, null, HASH_STR);
 };
 var closeModalCallback = function (e) {
   flg = false;
   doc.querySelector("#gtm__modal-wrapper").classList.remove("js-enable");

   addHistory();
 };

 //設定したハッシュタグが消えたら実行
 win.addEventListener("popstate", function (e) {
   if (!flg && loc.hash !== HASH_STR) {
     doc.querySelector("#gtm__modal-wrapper").classList.add("js-enable");
     flg = true;

     if (!e.state) return; // 初回アクセス時に再読み込みしてしまう対策
   }
 });

 //履歴の追加
 if(hash !== HASH_STR) {
   addHistory();
 }

 doc.querySelector("#gtm__modal-back-btn").addEventListener("click", function () {
   location.href = ref;
 });
 doc.querySelector("#gtm__modal-continue-btn").addEventListener("click", closeModalCallback);
 doc.querySelector("#gtm__modal-overlay").addEventListener("click", closeModalCallback);


}(window, document, history, location));
</script>

カスタムHTMLは長いですが、設定は簡単です。

Step1: カスタムHTMLをコピー

見出しの通り、前述のカスタムHTMLをコピーしてください

Step2: カスタムHTMLをGTMに追加し、トリガーをセット

ここからはGoogleタグマネージャー上で設置作業を行っていきます。
まず、新規タグの追加で「カスタムHTML」を選択します。

GTMブログ①

次に、Step1でコピーした内容をペーストします。

GTMブログ②

最後にトリガーを作成して紐付けます。
今回はトリガーはフォームのページで確認したいため、フォームのページのURLを指定してください。※今回はお問い合わせページだけが対象なので/contact.htmlを指定しています。

カスタムHTML_1

以上で設定は終わりです。

確認方法

プレビューモードを実行し、実際に表示確認をしてみましょう。

実装サンプル：
１）サイトにアクセス
https://and-aaa.com/

２）お問い合わせページに遷移

トップページから、メールのマークをクリックして、お問い合わせページに遷移し、ブラウザの戻るボタンを押してみると、このようにポップアップが表示されました！

スクリーンショット 2021-09-14 17.09.31

スマホでもしっかり表示されます

スクリーンショット 2021-09-14 17.08.43

実装にあたってのご注意事項

ページのURLの末尾に#enblbackというハッシュが入りますがこれはこのタグの仕様です。干渉によりフォームの動作に影響する可能性がございますのでご留意ください。

また、HTML5の仕様を使って実装しているので古いブラウザでは動きません。

最後に

実は意外に簡単に出来てしまう離脱防止のポップアップのご紹介でした。
EFOツールのご予算でお悩みの方は一度試した上でご検討してみてはいかがでしょうか。

◆Twitter
お役立ち情報発信中！こちらのフォローもよろしくお願いします。

売り上げを伸ばすということは、
「底辺を広げる」
「高さをあげる」
この二つの軸で、三角形の面積を広げることを考えていくことなのです。https://t.co/qDeDqgxzub pic.twitter.com/21DKIyQFsJ
— and,a 株式会社【公式】ウェブマーケに役立つ独自ノウハウを発信 (@_and_a_) September 13, 2021

----------------
GTMの設定やweb解析の等のご相談はサイトよりお願いします。
▼お問い合わせ
and,a（https://and-aaa.com/）
----------------

この記事が気に入ったら、サポートをしてみませんか？
気軽にクリエイターの支援と、記事のオススメができます！