• !

  公開日:   最終更新日:

【基本設定編】スクロール途中でポップアップを表示する事ができる無料プラグイン「Popup Maker」

【基本設定編】スクロール途中でポップアップを表示する事ができる無料プラグイン「Popup Maker」の紹介です。

スクロール途中でポップアップを表示する事ができる無料プラグイン「Popup Maker」

ブログ記事のCTA用に、文末にCTAを付けるタイプもありますが、今回ご紹介するのはある一定の時間が経つと画面右下にポップアップが表示されるタイプのポップアップを作成します。
何も対策していないより離脱率を下げる、コンバージョンに繋げる効果が期待できます。

スクロール途中でポップアップを表示する事ができる無料プラグイン「Popup Maker」でできること

早速インストールしてみましょう。

一定の時間経過後に自動でポップアップを表示する事ができる無料プラグイン「Popup Maker」インストール方法

ログイン後管理画面の「プラグイン」をクリックします。
ダッシュボード・プラグイン画面
新規追加ボタンをクリックし、キーワード入力欄に「Popup Maker」と入力しましょう。
ダッシュボード・プラグインから新規追加
今すぐインストール、有効化のボタンをクリックしましょう。 これでインストールは完了です。
Popup Makerインストール画面

スクロール途中でポップアップを表示する事ができる無料プラグイン「Popup Maker」設定方法

インストールが完了すると以下のような画面に遷移します。
ページ最下部にある青い「Create your first popup!」ボタンをクリックして始めましょう。
ポップアップ作成開始ボタン

おさえるべき5項目

4ステップで完成
まずおさえておきたいのが上記5項目です。
①ID番号(自動で振り分けられます。)
②ポップアップの名前(管理者にしか公開されないので、あなたが覚えやすい日本語名を入力してください。
③ポップアップのタイトル
④ポップアップの本文
⑤公開ボタン

上記5項目でとりあえずの部分は完成します。
あとはPOPUP SETTINGSでどのような動きや位置でポップアップさせるのか詳細設定を行い、ショートコードを貼り付けるという工程です。

では①から順番に行っていきましょう。
仮に今回のポップアップがセミナーへの周知のためのCTAに使うとします。
まずは画像を準備します。
今回は架空ですがセミナー無料招待のバナーを作成してみました。
セミナー招待バナー 名前、タイトル(任意)、本文を入れました。 ポップアップメーカー作成画面

トリガーの設定

トリガーの設定をしましょう。 Add New Triggerボタンをクリックします。

トリガーの設定

最初のドロップダウンメニューからお好きなものを選びましょう。 ・クリックして開く ・時間になったら自動で開く ・お問い合わせの送信 から選ぶ事ができます。 今回は時間になったら自動で開くを選択しました。 種類選択

次のチェックボックスは、クッキーでグ記事のCTA用に、文末にCTAを付けるタイプもありますが、今回ご紹介するのはある一定の高さスクロールされると画面右下にポップアップが表示されるタイプのCTAを作成します。
何も対策していないより離脱率を下げる、コンバージョンに繋げる効果が期待できます。

おさえるべき基本の5項目

4ステップで完成
まずおさえておきたいのが下記5項目です。
①ID番号(自動で振り分けられます。)
②ポップアップの名前
③ポップアップのタイトル
④ポップアップの本文
⑤公開ボタン

上記5項目でとりあえずの部分は完成します。
あとはPOPUP SETTINGSでどのような動きや位置でポップアップさせるのか詳細設定を行い、ショートコードを貼り付けるという工程です。 ※POPUP SETTINGSを行わないとプレビュー画面で動作しません。 ※バナーのリンク先ページも作成しましょう。

仮に今回のポップアップがセミナーへの周知のためのCTAに使うとします。
まずは画像を準備します。
今回は架空ですがセミナー無料招待のバナーを作成してみました。
セミナー招待バナー

では①から順番に見ていきましょう。

ID

①は新規作成後自動でIDが振られます。後ほどこのID番号が必要になりますのでざっくり覚えている程度で大丈夫です。

POPUP NAME

これは管理者にしか公開されないので、あなたが覚えやすい日本語名を入力してください。

POPUP TITLE

任意の入力画面です。 ポップアップで表示されるタイトル部分です。 不要な場合は入力しなくても作成できます。 今回は「先着10名様まで無料でセミナーご参加」と入力しました。

本文入力欄

ぱっと目を引くために画像を上手に使うと良いかと思います。 先ほど作成したバナーをメディアから挿入しました。 すると以下のようになりました。 ポップアップメーカー作成画面 長くなってしまったので、次の記事で動きやデザインの設定を行います。