長いウェブサイトでは読んでいるとトップに戻るボタンがでてくる

縦に長いウェブページを閲覧しているとトップに戻るのがページ離脱に結びつく恐れがある。
そんな行動を防ぐために「トップにもどる」ボタンを作ると、ユーザはいつでもページトップに戻れるのでユーザを失わない。
その昨日はjavascriptで実装ができるのだが、ウェブページにjavascriptを盛り込んでしまうとページの読み込み速度が下がってしまうので
今回はGoogleタグマネージャーを使って、ボタンを設置していく。

javascriptをサクッと書く

<div id="back-to-top" style="position: fixed; bottom: 20px; left: 20px; display: none; z-index: 1000;">
  <button style="padding: 10px 15px; font-size: 16px; background-color: #ff99cc; color: white; border: none; border-radius: 5px; cursor: pointer;">▲</button>
</div>
<script>
  document.addEventListener('scroll', function() {
    if (window.scrollY > window.innerHeight / 2) {
      document.getElementById('back-to-top').style.display = 'block';
    } else {
      document.getElementById('back-to-top').style.display = 'none';
    }
  });
  
  document.getElementById('back-to-top').addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

このコードはページの右下にトップに戻るボタンを表示させるコードである。
ボタン位置はコードの数値を変えて変更してほしい。
このコードは頁のトップに戻るボタンのコードになるので、
発動トリガーをページ75%二設定をするとページの下部に行けば、トップに戻るボタンが表示されるはずである。
あとはこのタグのトリガーをページ読み込み距離で設定すれば完了である。
便利だなと思った人はぜひ設置してみてほしい。