ポップアップ作成機能が追加されました

こんにちは、「chotto」の開発と運営をしているタカフミです。

いつもchottoをご利用いただきありがとうございます。

今回のアップデートにて、ポップアップを作成できる機能が追加されました。

この機能を使うことで、任意のページにポップアップを表示することができます。

ポップアップで目立たせて表示できるため、キャンペーンやイベントなどのお知らせを訪問者に知ってもらいやすくなります。

【対象プラン】
以下のプランでご利用いただけます。

• レギュラープラン

ポップアップの作り方について

画面上部のメニューより「ツール」をクリックします。

サイドメニューより「ポップアップ」をクリックします。

右上にある「新規作成」をクリックします。

ウィンドウが表示されるので「名前」のところにポップアップの名前を入力して「作成する」をクリックします。

作成完了画面が表示されるので「編集画面に移動する」をクリックします。

内容を入力する

編集画面に表示されている「内容」のところにポップアップに表示する内容を入力して、「保存する」をクリックします。

ボタンを設定する

ポップアップには一つだけボタンを設定することができます。

下部にある「ボタン」タブをクリックします。

ボタンのテキストと移動先を入力する

「ボタンのテキスト」のところにボタンの中に表示したいテキストを入力して、クリックした際の移動先のURLを「ボタンの移動先」に入力したら「保存する」をクリックします。

新しいウィンドウで開くようにする

「新しいウィンドウで開く」にチェックをつけると、別ウィンドウで移動先のページを表示することができます。

必要に応じてチェックをつけて「保存する」をクリックします。

アイキャッチ画像を設定する

ポップアップの上部にアイキャッチ画像を設定することができます。

下部にある「アイキャッチ画像」タブをクリックします。

「ファイルを選択」をクリックして、アイキャッチにしたい画像を選択します。

ファイルが選択できたら「保存する」をクリックします。

プレビューで確認する

ポップアップに入力した内容やボタン、アイキャッチ画像などをプレビューで確認することができます。

右上にある「⋯」のボタンをクリックして「プレビュー」をクリックします。

作成中のポップアップがどんなふうに見える確認できます。

※デザインテンプレートに応じて、実際に表示されるフォントや色が変わります

表示対象のページを設定する

ポップアップを表示する対象ページを設定します。

下部にある「表示対象ページ」タブをクリックします。

表示対象ページを追加する

「ページを追加」をクリックします。

ウィンドウが表示されるのでプルダウンより表示させたいページを選択して「追加する」をクリックします。

次のように「トップページ」が表示対象ページに追加されます。

ページを外したい場合

対象から外したいページのところにある「ゴミ箱」アイコンをクリックすると、ページを表示対象から外すことができます。

ページの種類と説明は次の通りです。

除外対象のページを設定する

ポップアップを表示させない対象ページが設定することができます。なお、除外対象の設定が優先されるようになっています。

表示対象ページに「全てのページ」が設定されており、除外対象ページに「トップページ」が設定されている場合には「トップページ以外のすべてのページにポップアップが表示される」ようになります。

下部にある「除外対象ページ」タブをクリックします。

除外対象ページを追加する

「ページを追加」をクリックします。

ウィンドウが表示されるのでプルダウンより除外したいページを選択して「追加する」をクリックします。

次のように「よくある質問ページ」が除外対象ページに追加されます。

【設定例①】問合せページ以外のすべてのページにポップアップを表示させる場合

お問合せページ以外のすべてのページにポップアップを表示させたい場合には、次のように設定してください。

【表示対象ページ】

「全てのページ」を追加する。

【除外対象ページ】

「お問合せページ」だけを追加する。

【設定例②】指定したブログ記事にポップアップを表示させる場合

指定したブログ記事にポップアップ表示させたい場合には、次のように設定してください。

「表示対象ページ」タブを開いて「ページを追加」をクリックします。

プルダウンから「指定のブログ記事」を選択します。

検索窓のところにタイトルのキーワードを入力して「エンターキー」を押すと、キーワードにマッチする記事が一覧で表示されます。

一覧から追加したい記事にチェックをつけて「追加する」をクリックします。

次のように一覧に追加されて、指定したブログ記事だけにポップアップが表示されるようになります。

【設定例③】指定した記事以外のブログ記事だけにポップアップを表示させる場合

指定した記事以外のブログ記事だけにポップアップを表示させたい場合は、次のとおりにします。

「表示対象ページ」に「全てのブログ記事」を追加します。

「除外対象ページ」タブを開いたら、「ページを追加」をクリックします。

プルダウンから「指定のブログ記事」を選択します。

検索窓のところにタイトルのキーワードを入力して「エンターキー」を押すと、キーワードにマッチする記事が一覧で表示されます。

一覧から追加したい記事にチェックをつけて「追加する」をクリックします。

次のように一覧に追加されて、指定したブログ記事以外のブログ記事ページだけにポップアップが表示されるようになります。

タイミングを設定する

ポップアップが表示されるまでのタイミング（時間）を設定できます。

タブ一覧より「タイミング」タブを開きます。

「表示するタイミング」のところに秒数を入力して「保存する」をクリックします。

表示優先度を設定する

タブ一覧より「その他」を開きます。

「表示優先度」のプルダウンをクリックして「低・中・高」から優先度を選んで「保存する」をクリックします。

同じ条件となるページに複数のポップアップが設定されている場合に、ここで設定した優先度が参考にされます。

ポップアップを有効にする

画面右上にある「有効にする」ボタンをクリックして、ポップアップを有効にします。

表示記録をリセットする

右上にある「⋯」のボタンをクリックして「表示記録をリセットする」をクリックします。

確認画面が表示されるので「リセットする」をクリックします。

リセットすることで、すでに表示済みのデバイスにたいしてポップアップを再度表示できるようになります。

表示ロジックを設定する

画面上部のメニューより「ツール」をクリックします。

サイドメニューより「ポップアップ」をクリックします。

タブ一覧より「設定」を開きます。

「表示ロジック」のプルダウンから任意のロジックを選択して、「保存する」をクリックします。

1つのページ上で複数のポップアップが表示されるのを防ぐ設定項目で、優先度が同じポップアップが複数ある場合に、このロジックに従って次に優先する項目が決定されます。

計測結果を見る

ポップアップの一覧から「表示回数」や「クリック数」などの計測結果を見ることができます。

各項目の説明は次のとおりです。

ログインした状態でご自身で閲覧した「ポップアップの表示」や「ボタンのクリック」などのイベントはカウントされません。

計測結果をリセットする

計測結果をリセットしたいポップアップのところから「リセット」をクリックします。

確認画面が表示されるので「リセットする」をクリックします。