CallToActionボタンの小ワザ - it's an endless world.

固定ヘッダーにCallToActionボタンが置かれていてスクロールするとついてくるサイト、最近よく見かけますよね。

こういうの。スクロールするとヘッダーが出てくるやつ。
www.invisionapp.com
最近よく見かけるって言ってもけっこう前からありますが。

この作りは個人的にはけっこう嫌いです。

なぜかというとどのコンテンツを見ていたときにCallToActionボタンを押下したかわからないから。

ページ内の各コンテンツにCallToActionボタンがあればそれぞれにパラメータを仕込めば良いですが、固定ヘッダーだとそれができず。

この情報は「ユーザが何に興味を持ってアクションしたのか？」というかなり貴重な情報だと思っていて、それが取得できないのは痛いなと。

と、思っていたけど固定ヘッダーにCallToActionが置かれていてもどのコンテンツを見ているときに押下されたかがわかる小ワザを思いついたので共有しておきます。

サンプルはこちら。

https://migi1982.github.io/LP-CTA/

やっていることは、各コンテンツの位置をあらかじめ取得しておき、CallToActionボタンが押されたタイミングでスクロール位置を取得して対比して現在見ているコンテンツを算出しているだけ。

ね、簡単でしょう？

特に難しいことはしてないです。

'use strict';

window.onload = function() {
  // 各コンテンツに振ったIDを列記
  var contents = ['content1', 'content2', 'content3', 'content4'];
  // 各コンテンツの位置を格納する配列を用意
  var positions = [];

  // 各コンテンツの位置を取得して格納
  contents.forEach(function(v) {
    var element = document.getElementById(v);
    // 画面上部からの絶対位置
    var top = element.getBoundingClientRect().top + window.pageYOffset;
    // コンテンツ自体の高さ
    var height = element.getBoundingClientRect().height;
    // コンテンツの縦中央を基準として格納
    positions.push(top - height / 2);
  });

  // 現在の位置を取得する関数
  var getPosition = function(s) {
    for (var i = 0, l = positions.length; i < l; i++) {
      if (s > positions[l - 1]) {
        return contents[l - 1];
      } else if (s < positions[i]) {
        return contents[i - 1];
      }
    }
  };

  // CTAボタン
  var cta = document.getElementById('signup');
  // クリックされた際にパラメータとして位置を追加する
  cta.addEventListener('click', function() {
    var position = getPosition(document.body.scrollTop);
    this.href = './signup.html?ref=' + position;
  }, false);
};