BLOGMarTechのトレンドや要素技術、各種サービスについて取り上げて紹介していきます。オープンソースTweetLPO(ランディングページ最適化)を実施するうえでは、マウス操作などからユーザーの志向や心理を読み取り、離脱しそうなユーザーに対してのみコミュニケーションの追加実施することが有用です。Market」などとして既に市場化が進んでいる領域でもあります。Technology」1の領域を知るにあたっては、同種のことをオープンソースで提供している人気ライブラリ「Ouibounce」について理解するのが早いでしょう。タブを閉じる前にモーダルを出すライブラリ「Ouibounce」タブを閉じる前にモーダルを出すライブラリ「Ouibounce」は、Github上でスター数が2,000件を超えるオープンソースの人気ライブラリです。国内でも2014年にMoongiftが紹介したことで有名になりました。内容としては、下記の通り、ウェブサイトをユーザーが離れようとしたときにモーダルを表示する、というものです。実現方法この「Ouibounce」、中身は実はとてもシンプルな作りになっています。(そのためもあってかソース自体ここ数年更新されていないようです)ユーザーが離れようとする動きの検知ユーザーが離れようとしたときのマウス操作の検知処理は下記の通りです。マウスのmouseleaveイベントに対するリスナーを作成リスナー上では、画面領域の上部から20ピクセル以上だった場合にのみ、(モーダル表示の)処理を実行。handleMouseleave);Mouseleaveイベントはマウスが要素の外に出た場合に一度のみ発火するイベントですが、ここではdocument.documentElement要素のMouseleaveイベントに対してリスナーを設定することで、ブラウザ画面領域の外に出たときにモーダル表示処理を実行する仕様となっています。以上の通り、基本的にはとてもシンプルな作りなのですが、setTimeoutによるサスペンド処理にはOuibounceの処理の配慮を感じます。}}Mouseenterイベントはマウスが要素内に外から入ってきた場合に一度のみ発火するイベントです。ここではdocument.documentElement要素に対してリスナーを設定することで、一度mouseleaveイベントが発生しても1秒(=1000ミリ秒、デフォルト設定)以内に画面領域内にマウスが戻ってきた場合はイベント実行処理はサスペンドされ、モーダル表示は実施されません。マウスのちょっとしたチラツキなどによってマウスポインタが一時的にブラウザ画面領域外に出てしまうことはままあることです。したノイズに反応しないようにすることでユーザーにとって邪魔にならないようにしようとする配慮を感じます。オープンソースライブラリのある種の割り切り以上より、マウスの離脱試行に対するモーダル表示処理を「Ouibounce」が非常にシンプルに実装できることがわかったかと思います。そこにはユーザーの「離脱しようとする」心理を読み取るにおいて「マウスをタブのほうに移動させる」という操作のみをターゲットにしようとする、ある種の割り切りが感じられます。「Ouibounce」のような方法だと「ユーザーが本当はブックマークするつもりだったのにモーダルが表示されてしまった」などのノイズを取り除くことはできません。これでもマーケティング現場での活用に耐えうるとするかは考え方次第ですが、理想的にはユーザーそれぞれのマウス操作傾向を考察し、それに応じたコミュニケーションを設計していくことが必要でしょう。そのためには機械学習を利用して本当に離脱したユーザーの直前のマウスの動きを教師あり学習していくことが必要で、これはオープンソースのJavaScriptのみ提供のライブラリでは実現し得ない領域となってきます。Technology」の領域として市場化が進んでいます。Technology」の力を謳っています。Exchange)OptimonkOptinMonsterただ実際にツール選定などを行うにあたっては、まだまだ形成段階の市場であり、有用な比較検証の指標自体が存在しない印象です。結局はどこまで効果的に(ノイズなく)離脱しそうなユーザーのみをターゲットとできるのか、その正確性・効率性がキモな訳で、いずれそういった比較検証の情報が出て来ることを期待したいところです。»プロフィールデジタルマーケッターとしてキャリアを始めた後、ウェブエンジニアに転身し、コンバージョン率改善系のSaaSプロダクト開発・提供をリードエンジニアとして主導してきました。Technology)について紹介していきます。※ここで発信する情報は著者個人の見解に基づくものであり、所属企業・団体を代表するものではありません。(1)リンクこのブログについてスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。