WordPressの動画ポップアップ

WordPressで動画ポップアップを作成する方法(簡単な方法)

WordPressで動画ポップアップを作成する方法をお探しですか?

動画はサイトのエンゲージメント率を飛躍的に向上させることができます。技術的にはWordPressサイトに直接動画を埋め込むことができますが、その方法にはいくつかの欠点があります。

  • 動画を大きくしたい場合、ユーザーは「YouTubeで表示」ボタンをクリックしてサイトから離脱します。
  • 埋め込み動画は、サイトから動画ホスティングサイトへのHTTPS接続を作成して動画プレビューを取得します。これにより、サイトの速度が大幅に低下する可能性があります。
  • ポップアップで可能な、ユーザーアクションに基づいて動画をトリガーすることは、動画埋め込みではできません。動画の表示方法を制御する方法がないため、埋め込み動画からのコンバージョンはポップアップよりも低くなります。
  • 通常、フォームのすぐ上に配置しない限り、埋め込み動画を使用してリードを収集することはできません。そのようなオプトインフォームを配置すると、訪問者は通常、動画の直後にさらに多くのコンテンツを期待するため、非常に不自然に見える可能性があります。

動画ポップアップは、これらの問題のほとんどを問題なく解決できます。

この記事では、10分以内にWordPressサイトに動画ポップアップを設定します。

さあ、始めましょう。

開始する前に知っておくべきこと

ポップアップの作成には OptinMonster の使用をお勧めします。

OptinMonster ホーム

OptinMonster は世界No.1のコンバージョンツールキットであり、私たち自身も使用しています。OptinMonsterは、コンバージョンする強力なポップアップを非常に簡単に作成できます。そして、コーディングを一切使用する必要はありません。

私たちは、OptinMonsterのレビューも作成しました。

そちらを確認するか、今すぐキャンペーンを開始してください。OptinMonsterにサインアップして、この記事の残りの部分に従ってください。このチュートリアルに従えば、次のようなWordPressの動画ポップアップを作成できるようになります。

禰󠄀豆子ポップアップ

動画ポップアップの作成方法

動画ポップアップの基本的な仕組みを理解したので、動画ポップアップの作成に入りましょう。

ステップ#1. キャンペーンを作成する

次に、最初のキャンペーンを作成します。OptinMonsterダッシュボードに移動し、「キャンペーンを作成」をクリックします。

OptinMonsterキャンペーンを作成する

コンバージョン率が非常に高いライトボックスポップアップから始めることをお勧めします。

新しいライトボックスポップアップキャンペーン

次に、キャンペーンテンプレートを選択します。このチュートリアルではシンプルなキャンペーンタイプを使用しますが、WordPressサイトの動画ポップアップを作成するために任意のテンプレートを使用できます。

ポップアップキャンペーンのテーマを選択する

シンプルなキャンペーンテンプレートには要素がほとんどありません。そのため、オプトインを煩雑にすることなく、簡単に要素を追加できます。

次に、キャンペーンに名前を付けます。キャンペーン名は主にあなたのためであり、さまざまなターゲティングオプションを持つ多くのポップアップを作成することになるでしょう。そのため、キャンペーンを簡単に管理できるように、キャンペーンにわかりやすい名前を付けてください。

また、プランによっては、複数のサイトでOptinMonsterを使用することもできます。したがって、キャンペーンを表示したいウェブサイトも選択してください。

キャンペーンのアイデンティティを作成する

完了したら、ビルド開始を押します。

ステップ#2. 動画埋め込みURLを取得する

次に、埋め込みたい動画のURLを取得します。このチュートリアルではYouTubeを使用しますが、OptinMonsterはVimeoやWistiaなどの他の動画ホスティングプラットフォームでも機能します。

このチュートリアルでは、PushEngage を利用したプッシュ通知に関する YouTube 動画を使用します。共有ボタンをクリックしてください。

YouTube埋め込みリンク

次に、埋め込みボタンをクリックします。

埋め込みリンクボタン

コードスニペットのプレビューが表示されます。

動画埋め込みiframe

コード全体ではなく、動画の埋め込みリンクのみをコピーしてください。

動画埋め込みリンク

次のステップのキャンペーンで使用するため、この動画の埋め込みリンクを保存しておきます。

ステップ 3: キャンペーンに動画を埋め込む

OptinMonster のキャンペーンビルダーに戻ります。キャンペーンビルダーのデザインビューから、ポップアップを表示したい場所に動画ブロックをドラッグアンドドロップします。

OptinMonsterポップアップに動画ブロックを追加

ライブプレビューで動画を直接クリックして、編集ツールを表示します。ホスト動画 URL ボックスに、動画の埋め込み URL を入力します。

ホストされている動画URLを貼り付け

キャンペーンのプレビューが更新され、更新された YouTube ライトボックス動画ポップアップキャンペーンが表示されます。画面右上にある保存ボタンをクリックして、キャンペーンを保存してください。

OptinMonsterキャンペーンを保存

ステップ4:ポップアップにクリックして購読するボタンを追加する

プッシュ通知は、ウェブサイトのトラフィックとエンゲージメントを自動で増やすのに役立ちます。オンラインストアを運営している場合は、PushEngageが自動eコマースプッシュ通知の作成を支援することで、売上を伸ばすのにも役立ちます。

無料で開始できますが、ビジネスの成長に真剣に取り組んでいる場合は、有料プランを購入する必要があります。また、プッシュ通知サービスを購入する前に、プッシュ通知のコストに関するこのガイドを確認してください。

PushEngageで得られるものを簡単に見てみましょう。

  • コンバージョン率の高い自動キャンペーン
  • 複数のターゲティングおよびキャンペーンスケジュールオプション
  • 目標追跡と高度な分析
  • スマートA/Bテスト
  • 専任のサクセスマネージャー

ビジネスのトラフィック、エンゲージメント、売上を伸ばしたいのであれば、PushEngageが断然最良の選択肢であることがわかるでしょう。予算が限られている場合は、プッシュ通知で少しクリエイティブになることもできます。

まず、OptinMonsterのサイドバーからポップアップにHTMLブロックを追加します。

OptinMonsterにHTMLブロックを追加する

ここで、プッシュ通知購読者を収集するためのコードを追加します。まず、クリック可能なボタンを作成するために、次のコードを貼り付けます。

<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications</button>

HTMLを追加できる場所にコードを貼り付けます。

ポップアップにHTMLコードを追加する

もちろん、スタイルを調整して、より魅力的に見せることもできます。次に、ボタンをクリックしたときにプッシュ通知購読者を収集するようにします。

PushEngageのホームページにアクセスし、開始するボタンをクリックします。

PushEngage

次に、PushEngage を試すために無料プランを選択するか、ビジネスの成長に真剣に取り組んでいる場合は有料プランを選択します。有料プランには、より多くのキャンペーンオプションと、さらに大きな購読者リストを構築する機能が付属しています。

あなたのPushEngageダッシュボードで、サイト設定 »サイト詳細に移動し、セットアップ手順を表示するにはここをクリックボタンをクリックします。「任意のサイト」の下に、インストールコードが表示されます。

PushEngage どのサイトにもインストールコード

警告:ダッシュボードから取得したコードをコピーする必要があります。コードはPushEngageユーザーごとに固有です。画像内のコードをコピーしてプッシュ通知購読者を収集することはできません。

PushEngageダッシュボードにコードが表示されたら、2番目のスクリプトを取得し、追加のコードをいくつか追加します。最終的なコードは次のようになります。

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

このコードを OptinMonster のHTML ブロックに、ボタンのコードの直後、<div></div> コードブロックの間に挿入すれば完了です!

ステップ 5: 動画ポップアップの表示ルールを設定する

次に、訪問者に動画ポップアップキャンペーンを表示するタイミングを指定します。

そのために、表示ルールタブに移動します。

キャンペーンのデフォルト表示ルールを確認してください。

OptinMonsterのデフォルト表示ルール

これは、カスタム表示ルールを設定し忘れた場合でも、訪問者がサイトに少なくとも 5 秒間滞在すると動画ポップアップが表示されることを意味します。

ステップ 6: メールサービス連携を追加する

連携タブから新規連携を追加をクリックし、メールサービスプロバイダーを追加します。メールプロバイダードロップダウンからメールサービスプロバイダーを選択するだけです。

OptinMonster連携

メールキャンペーンには ConstantContact の使用をお勧めします。ConstantContact は、メールリストのエンゲージメントと販売を自動化するのに役立つ複数のメール自動化キャンペーンを提供しています。

ステップ 7: キャンペーンを公開する

OptinMonster のすべてのキャンペーンはデフォルトで一時停止されています。そのため、サイト訪問者がサイトにアクセスしたときにポップアップが表示されるように、キャンペーンを公開します。

OptinMonster ダッシュボードに戻ります。トップメニューの公開タブに移動して公開オプションを表示します。次に、ステータスを公開に設定し、ウェブサイトプラットフォームを選択します。

OptinMonsterキャンペーンを公開する

WordPress サイトを実行している場合、OptinMonster プラグインが残りのセットアップを自動的に処理します。完了したら、保存をクリックすることを忘れないでください。サイトに戻ると、作成したばかりの動画ポップアップが表示されます。

WordPress で動画ポップアップを作成した後の作業

今回は以上です、皆さん!

WordPressサイトで動画ポップアップを作成することは、トラフィックをメール購読者や実際のビジネスリードに転換するための非常に効果的な方法です。動画ポップアップを設定した後に直面する唯一の課題は、サイトのトラフィックを増やすことです。

トラフィックを増やすための手頃な方法を探している場合は、プッシュ通知の使用をお勧めします。プッシュ通知は、より多くのリピートトラフィックとサイトエンゲージメントをもたらすのに役立ちます。売上を生み出す自動プッシュ通知キャンペーンを作成することもできます。

まだ納得できませんか?これらのリソースを確認してください。

プッシュ通知キャンペーンを作成するためにPushEngageの使用をお勧めします。PushEngageは世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、 今すぐPushEngageを使い始めましょう

コメントを追加

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従ってモデレーションされ、すべてのリンクはノーフォローとなりますのでご注意ください。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

ウェブサイトを離れた後も訪問者をエンゲージし、維持する

見逃せないプッシュ通知で、すべてのウェブ訪問の価値を高めましょう。

  • 永久無料プラン
  • 簡単なセットアップ
  • 5つ星サポート