Log

いろいろ

ぬるっと登場する広告を誤タップさせることでUXを爆下げする

プログラミング

ボタンを押そうとしたら広告がぬるっと登場してボタンではなく広告を押してしまう。インターネットにはびこる誤タップを狙う広告の一つですね。ユーザーから見ると用途はサイアクですが技術に罪はありませんので、実装を紐解いて学びます。

サンプル

↓ここからしょうもな広告を実装したサンプル↓

ヨーロッパの秋の旅行におすすめの国・都市5選

夏の終わりを迎え、ヨーロッパでは秋の旅行シーズンが始まっています。美しい自然や美食、文化遺産など、魅力的な観光スポットが数多くあり、旅行好きの方にはたまらない季節です。そこで、今回は、秋に訪れるのにおすすめのヨーロッパの国や都市を5つ紹介します。

関連記事

日本の秋の旅行におすすめの国・都市5選

アメリカの秋の旅行におすすめの国・都市5選

火星の秋の旅行におすすめの国・都市5選

人気記事

日本の秋の旅行におすすめの国・都市5選

日本の秋の旅行におすすめの国・都市5選

日本の秋の旅行におすすめの国・都市5選

日本の秋の旅行におすすめの国・都市5選

日本の秋の旅行におすすめの国・都市5選

↑ここまでサンプル↑

実装

ユーザーのスクロールにより画面上に要素が表示されるタイミングをとらえる必要があります。そんなときはやっぱりIntersectionObserver。IntersectionObserverはすべてを解決する。

IntersectionObserverではてなブログ記事内のApple Musicを自動再生する - Log

これで画面上にページングリンクが表示されるタイミングをキャッチできるので、あとはいやらしい秒数が経過した後に広告を表示するだけです。短すぎるとリンクを押そうとする前に広告が表示されてしまう。長すぎると広告が表示される前にリンクを押されてしまう。不毛な心理戦です。

const DELAY = 1000;
const IMG_HEIGHT = "600px";

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            setTimeout(() => entry.target.style.height = IMG_HEIGHT, DELAY)
        }
    });
});

const img = document.getElementById('nulltto');
observer.observe(img);

監視しているimgがイヤイヤ広告です。height: 0pxを付与しているため初期状態は不可視であり、IntersectionObserverによりheightの値が付与されることで可視化されます。これをぬるっと表示するにはtransitionプロパティを使いましょう。

transition - CSS: カスケーディングスタイルシート | MDN

#nulltto {
    transition: all 700ms ease-in;
}

ちなみに、ぬるっと表示するための中間状態は自動計算されます。

CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN

おわりに

「ディスアド」でうまいことが言えそうで言えませんでした。