【GTM】ウェブページに一定時間滞在のユーザに対して特定のポップアップを行う方法

【マーケター】ウェブページに一定時間滞在のユーザに対して特定のポップアップを行う方法【GTM】

最近のウェブページの動きは複雑怪奇

コンピュータ犯罪が高度化しているのと一方で、従来のウェブサイトの技術も高度化しています。
ウェブサイトに長時間滞在してくれている人は記事が役に立っている可能性が高いし、
そういったユーザーに対してはもちろん何か商品を買ってくれる可能性が高いのです。
実店舗の場合

引用：
https://g-w.st/blog/?p=6600

「この服お似合いですよ」と見込み客に対してプッシュをすることが可能ですが…
インターネットの場合、利用者は画面の向こうなのでなにか売り込むことができません。

そこでウェブページの場合は「過去１年間買い物がない」「カートインしたけれど決済画面に進んでいない」人に限り特定のアクションが可能

今回はウェブページ滞在１分以上の利用者に対して、ポップアップを出す方法を紹介します。

このウェブサイトには利用者のアクションによって様々な動作をするように設定をしてあるのですが、今回は１分間以上ページに滞在してくれた人は
興味を持ってくれている可能性が高いので、オファーを提示してみようと思います。

document.writeでプロフィールを書く

<script>
(function() {
var o = document.createElement('div'); o.className = 'optimize-m';
o.insertAdjacentHTML('afterbegin','<div class="optimize-m-background" data-m-close></div><div class="optimize-m-inner">\
<figure class="optimize-m-image">\
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazukichi_0914/20240731/20240731202344.png" width="40%" height="40%">\
</figure>\
<h4 class="optimize-m-lead">\
おめでとうございます\
</h4>\
<h5 class="optimize-m-sublead">\
上記QRコードを読み込むと筆者SNSアカウントおよび各種ネットショッピングで使える限定割引コードを入手できます\
</h5>\
<p class="optimize-m-text">\
本ポップアップを下の閉じるボタンで消して続きを読むこともできます。\
</p>\
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazukichi_0914/20240731/20240731201339.png" width="40%" height="40%">\
<br>\
<button class="optimize-m-button" data-m-close>閉じる</button></div>\
<style>.optimize-m {position:fixed;top:0;left:0;z-index:999999;width:100vw;height:100vh;}.optimize-m-background {width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;background:rgba(0,0,0,.45);}.optimize-m-close {display:block;width:28px;height:28px;font-size:28px;padding:11px;color:#FFF;position:absolute;top:0;right:0;z-index:1;margin:30px30px00;}.optimize-m-inner {background:#FFF;border-radius:3px;min-width:260px;width:90%;max-width:400px;top:50%;left:50%;position:absolute;z-index:1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:20px;text-align:center;box-shadow:0px0px15pxrgba(0,0,0,.4);}.optimize-m-image,.optimize-m-lead,.optimize-m-sublead,.optimize-m-text{margin-bottom: 20px;}.optimize-m-image img{max-width:100%;height:auto;}.optimize-m-lead{font-size:24px;font-weight:700;color:#333;}.optimize-m-sublead{font-size:18px;font-weight:700;color:#666;}.optimize-m-text{font-size:inherit;text-align:left;}.optimize-m-button{background:#EE82EE;color:#FFF;border:none;border-radius:1em;font-size:20px;font-weight:700;padding:.4em 1em;}</style>'
);
if(sessionStorage.__popup__!==1)document.body.appendChild(o);sessionStorage.setItem('__popup__',1);[].slice.call(document.querySelectorAll('[data-m-close]')).forEach(function(el){el.addEventListener('click',function(){o.style.display='none'})});
})()
</script>