スマートCSSを使用して素晴らしいニュースレターポップアップ

5549 ワード
html css webdev javascript テキストリンク
ユーザーのスクロール位置を使用して、フローティングナビゲーションヘッダーをトリガします.

This article was originally published on my personal blog


さらに一歩を踏み出して、我々が我々のニュースレターを購読することに興味があるかどうか決定するためにこのテクニックを使うことができるかどうか見ましょう.これはあなたが今読んでいるような記事でユーザーを紹介するウェブサイト上のニュースレターです想像してください.目標は、新しい記事が将来公開されている場合は、通知を送信することができます購読にユーザーをトリガすることです.
私たちはマーケティング部門が私たちをgunpointで持っていると仮定します、そして、購読フォームでポップアップを示すために我々を命じています.個人的には、そのページの下にフォームを表示したいと思います.

どのようにこの瞬間を表示する最良の瞬間を決定するには?
あなたが実際の生活の中で買い物をしている想像してください、あなたはランダムな店にさまよう、あなたも戸口と店のキーパーがあなたの顔にジャンプしていない場合は、毎月のニュースレターを受信したい場合にお尋ねください.これは変ですよね?
インターネット上では、上記の振舞いはどういうわけか規範です.
多分、我々が尋ねる前に、我々の会報にユーザーの関心を測る良いスタートであるかもしれません.どのように我々はこの潜在的な関心を決定するのですか?我々のランダムな店に戻りましょう.
次のように仮定します.
  • 私は以前、その店を訪れたことがある
  • 店をさまよっている
  • 私は実際に何かを購入した
  • 私は店主との積極的な交流をしました
    • これらのカップルが緑の光を持っていたならば、私はまだ私の前でジャンプしている店主を歓迎しませんでした、しかし、私は確かに彼らがカウンターで私に尋ねるのを気にしません、そして、それが起こるならば、私は予約さえするかもしれません.
    我々のオンライン環境でこれに同等がありますか?私はいくつかのデータポイントを考えることができます、しかし、あなたが他の提案をするならば、コメントで知らせてください.
  • ユーザーは、サイト上でいくつかの時間を過ごした
  • ユーザはページを読んでいた
  • ユーザーは、現在のページにいくつかの時間を費やしている
  • ユーザーが購入した

    • これらのデータポイントを変数に翻訳する
    ユーザーがサイトを訪問したかどうかを判断するには、使用したセッション変数をセッション変数に保存する前にlocalStorage . 各ページに費やす時間を計算してlocalStorage 特定の間隔で私たちはどのくらいのユーザーがサイトを閲覧している知ることができます.したがって、我々はどのようにお客様のプラットフォームとの親しみを判断することができます、我々はランダムな店主ですか?または前に会ったことがありますか?
    ユーザーがどのように彼はサイトと相互作用しているかどうかを判断することができますページ上でスクロールダウンして測定することによって.ページが記事を提示するならば、これは私たちにユーザーが読んだ記事に沿ってどれくらいの若干の情報を与えるかもしれません.ユーザーがページに費やしている時間と組み合わせることで、ユーザーは記事を読んでいるか、ほぼそれを読んでいる推測することができます.ユーザーが記事を読む時間を取ったならば、それは彼が我々の内容に興味を持っていることを意味するかもしれません.もちろん、あなたが同様に実際の購入を追跡することができるwebshopを実行する場合.
    以下のデモで使用されるテクニックは、以前の記事とほとんど同じです.私はデータ属性のアップデータとして機能する関数を導入しました.そしてもう一つの追加はstack 関数.
    const stack = (value, step) => {
  // round the value to the nearest value divisible by step
  // if value is 37 and step is 10 the result is 30
  value = Math.floor(value / step) * step;

  // 30 will be our first value
  const parts = [value];

  // now we subtract 10 each iteration till we reach 0
  while (value > 0) {
    value -= step;
    parts.push(value);
  }

  // reverse the array so it goes from 0 to 30 insted of 30 to 0
  return parts.reverse();
}
    この関数はvalue とstep パラメータ仮定するvalue が50 とstep が10 , この配列を返します.[0, 10, 20, 30, 40, 50] . この配列を使用してデータ属性に複数の値を格納します.
    例えば、ユーザーがページの50 %をスクロールしたと仮定する.The data-vertical-scroll-progress 属性を"0 10 20 30 40 50" . これにより、私たちはCSS attribute selectors ユーザーがページの少なくとも30パーセントをスクロールしたかどうか決定すること.The ~= 比較は、設定された値が項目の空白で区切られたリストに含まれているかどうかを確認します.
    <html data-vertical-scroll-progress="0 10 20 30 40 50">
    <!-- Your website here -->
</html>

    html[data-vertical-scroll-progress~='30'] {
   /* user has scrolled down 30% */
}
    すべてのテストを結合して、これを現実としましょう.以下のデモでは、50 %をスクロールしたときに30秒のページにされているポップアップを表示されます.
    私はこれらのテクニックを使用することができます他の方法に超興味を持っているので、任意のアイデアがある場合は、以下を共有する!
    Python関数の練習
    HTMLテーブル、input