ここでは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。
下は、この仕組みの実例です。YouTube動画を再生しはじめてから、一定時間（２０秒）が経過すると、動画の下に購入ボタンが表示されるように設定しています。
途中で一時停止すると、カウントダウンタイマーも一時停止します。もう一度再生をはじめると、カウントダウンタイマーも動き出します。これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。
下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード（HTML、JavaScript、CSS）を見ることができます。
See the Pen
YouTubeMagicBuyButton by 倉田幸暢 (@yukinobukurata)
on CodePen.
上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
「HTML」タブ： この仕組みのソースコード（HTML、JavaScript、CSS）のパネルを表示（または非表示）させる。
「Result」タブ： この仕組みのソースコード（HTML、JavaScript、CSS）を実行したときのウェブページの状態を再現したパネルを表示（または非表示）させる。
ソースコードのダウンロードは、こちらをクリック。（GitHubのリポジトリ）
動画マーケティングに応用する方法
この仕組みは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みです。
わかりやすくいうと、「動画の内容をちゃんと見た人だけつぎのステップに進める」という仕組みです。
動画セールスレターや、オプトインページなどでこの仕組みをつかうと、効果的です。
もし、動画の下にはじめから購入ボタンがついていたら、それを見た人は「この動画は売り込みのための動画だ！」とおもって、抵抗感がうまれてしまいます。
これでは、提案を受け入れてもらいにくくなってしまいます。
そうではなく、はじめは購入ボタンを表示させないようにしておいて、抵抗感なく動画を見はじめてもらい、動画のなかで興味を引いてから、頃合いを見計らって購入ボタンを表示する。
こうすれば、抵抗感を引き起こさずに、自然な流れで提案をおこなうことができるので、提案を受け入れてもらえる確率があがります。
その結果として、成約率やオプトイン率が上がるでしょう。
また、このカウントダウンタイマーは、YouTube動画の一時停止/再生と連動して動きます。なので、動画を一時停止するとカウントダウンタイマーも一時停止し、もう一度動画の再生をはじめると、カウントダウンタイマーも動き出します。
これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。
僕が知るかぎり、このような仕組みはこれまで有料のツールでしか実現できませんでした。
それが、今や、完全に無料で誰でも自由につかうことができるようになりました。
科学の勝利ですね（笑）。
あと、誰でもかんたんにつかえるようにするために、設定項目もできるだけわかりやすくしました。
興味があれば、ぜひこの仕組みをつかってみてください。
続きを読む →
(*1)
