ご注意：ウェブプッシュ通知機能の設定を始める前に、まずポップアップを表示させたいキャンペーンを作成しておくことをおすすめします！

1. ウェブプッシュ通知管理画面へ移動

2. ウェブプッシュ通知を作成

右上の【作成】をクリック

ご注意：作成自体は可能ですが、プレビューや公開を行うには、事前にプラグインのコードをサイトに設置しておく必要があります。まだ設定がお済みでない場合はこちらをご参照ください：ウェブプッシュ通知コードをサイトに設置する方法

設定したいスタイルを選択

3. メッセージ設定

作成後に編集画面へ入ると、メッセージ設定ウィンドウが表示されます

メッセージ名を設定
この名称は管理画面の一覧にのみ表示され、識別・管理にお使いいただけます
メッセージタイプを選択（3択）
- キャンペーン
  動作：ポップアップをクリックすると指定のキャンペーンへ遷移
  事前に作成したキャンペーンを選択するか、キャンペーン番号を直接入力してキャンペーンをすばやく検索し、確認後【確定】をクリックすれば設定完了です。
- 通過シリアルコードの発行
  動作：ポップアップをクリックすると指定のキャンペーンへ遷移（参加資格はポップアップを見た人のみに限定されます）
  
  事前に作成した通過シリアルコード用キャンペーンを選択するか、キャンペーン番号を直接入力してすばやく検索し、確認後【確定】をクリックすれば設定完了です。

【補足説明】

通過シリアルコードキャンペーンとは？

キャンペーンの参加資格設定で通過シリアルコード機能をオンにすると、参加者の身元を制限でき、コードを取得した人のみが参加可能になります。通過シリアルコードは【手動で一括生成して自分で配布】【マーケティング配信経由で配布】【実店舗キャンペーンアシスタントでQRコードを生成し顧客にスキャンしてもらう】といった方法でご利用いただけます

ウェブページ
動作：ポップアップをクリックすると指定のURL（任意のURL）へ遷移
遷移先のURL（プロモーションページ、特定の記事ページ、口座開設ページなど）を設定し、確認後【確定】をクリックすれば設定完了です。

4. ウェブプッシュ通知エディターについて

1. ウェブプッシュ通知情報

ウェブプッシュ通知名（変更可能）、公開状態、スケジュールの表示（スケジュール設定については下記の【設定】の説明をご参照ください）

2. プラグインの内容

【アイコン型プラグイン】

	画像を変更	2種類のアップロード方法に対応：画像ファイルを直接アップロード画像URLを入力してアップロード画像形式：縦横比は問いませんが300px以上、サイズは3MB以内、PNG形式
	代替テキスト	訪問者が画像を正しく表示できない場合、【代替テキスト】の内容が表示されます。「参加はこちら」「今すぐ抽選」など、行動を促す文言の設定をおすすめします
	サイズ変更	画像の表示サイズを直接調整できます。（幅を調整すれば高さは自動調整されます）どのくらいのサイズが適切ですか？スマートフォンを基準に評価することをおすすめします。一般的な640pxの画面幅に対して、このプラグインをどのくらいの比率で表示させたいかを検討してください。1/6程度であれば、100px前後が目安です

3. スタイル

スタイル設定でプラグインの表示スタイルを調整できます

1. 閉じるボタン

プラグイン右上の 🅧 閉じるボタンの色設定

Tips：閉じるボタンを表示したくない場合は、透明色に設定できます

2. 背景

画像の背景色設定

不規則な形の画像をアップロードして底色を付けたい場合は、ここで設定できます。例：

3. 角丸

アップロードした画像の角を切り抜くことができます

4. 表示位置

画面上でのこのプラグインの表示位置

5. 余白

表示位置を選んだ後、余白でさらに位置を微調整できます

6. アニメーション効果

【なし】または【拡大縮小】のアニメーション効果を設定できます

4. 設定

設定では、このプラグインに関する条件（表示タイミング、クリック動作、スケジュールなど）を調整できます

設定項目	説明	設定オプションと内容
メッセージタイプ	メッセージタイプの変更や設定内容の調整（作成時に選択したメッセージタイプと同じもので、ここでも再調整可能）	3つから1つ選んだ後、対応する内容を設定できます。詳細はメッセージタイプの説明をご参照ください
クリック時の動作	訪問者がプラグインを見てクリックした際の動作設定	ポップアップウィンドウを開く元のページから離れることなく、そのまま小さなウィンドウが開き、その中に遷移先URL／キャンペーンページが表示されます（小ウィンドウ内で閲覧・参加まで完結可能）。閉じた後は、元々プラグインを見ていたページに戻ります。別タブで開くブラウザの新しいタブで遷移先URL／キャンペーンページを開きます。同じページで開くウェブページを直接、遷移先URL／キャンペーンページへ切り替えます（同じタブ内で元のページが置き換わります）
クリック可能になるまでの遅延時間	プラグインがクリック可能になるまでの時間を遅延させます。例：訪問者はページ到着と同時にプラグインを目にしますが、15秒待たないとクリックできない、といった設定です。
スケジュール指定	このプラグインをいつから稼働させるか（サイト上での実施時期）を設定
メッセージの表示位置（対象URL）	このプラグインをどのウェブページURLで表示するかを指定	すべてのページプラグインコードが設置されたすべてのページ。サイト全体で表示したい場合は、この方式での設定をおすすめします。特定のページ（注文確認ページや会計ページのURLなど）を除外することも可能ですキーワード設定：完全なURLを設定することも、URL内の特定のキーワードを設定することも可能です一部のページ特定のページのみでこのプラグインを表示させます。例えば、セール期間のランディングページのみでルーレットプラグインを表示したい、あるいは特定の記事ページのみでクイズプラグインを表示したい、といった場合はこちらの方式をおすすめします。特定のページ（注文確認ページや会計ページのURLなど）を除外することも可能ですキーワード設定：完全なURLを設定することも、URL内の特定のキーワードを設定することも可能です指定ステージ閲覧ページ（多元タスクモジュールと組み合わせて使用）多元タスク内の指定タスクカードから、指定のURLへ遷移してきた訪問者にのみ（多元タスク－カスタムクリック動作の設定と組み合わせる必要があります）このプラグインが表示されます。この方式で設定する際は、紐づけたい多元タスクキャンペーンと、その中のどのタスクかを直接選択できます。システムは自動的に、そのタスクのステージに設定されたキャンペーンを、このプラグインのクリック後の遷移先URLとして反映します。【多元タスクについて詳しく見る】【キャンペーン活用シナリオ例】新規会員向けの多元タスクキャンペーンがあり、その中の1つのタスクが、サイト上の新規会員向けガイド記事を30秒以上読むこと、だとします。この記事自体は公開記事であるため、この記事ページを訪れたすべての人にこのプラグイン（報酬受け取り）を表示させたくない場合があります。訪問者が必ずしも貴社の「新規会員」であるとは限らないためです。このような場合は、以下のように設定できます：多元タスクの当該ステージで、例えばクイズモジュール（あくまで一例で、他のモジュールでも構いません）を設定し、参加資格として通過シリアルコードが必須であるよう設定します。多元タスクの当該ステージ設定－カスタムクリック動作で、新規会員向けガイド記事のURLを設定します。ウェブプッシュ通知管理画面で新規メッセージを追加しますメッセージタイプで通過シリアルコードの発行を選択し、多元タスクの当該ステージに紐づけたキャンペーン（クイズモジュール）を選択します。クリック可能になるまでの遅延時間を30秒に設定しますメッセージの表示位置の設定で【指定ステージ閲覧ページ】を選択し、該当する多元タスクキャンペーンと同じタスクステージを選択します。これにより、多元タスク経由で来た新規会員が記事ページに30秒以上滞在してはじめてクリックできるようになり、かつこの経路で記事ページに入った人だけがこのプラグインを目にしてクイズモジュールに参加できるよう制限できます
表示タイミング	プラグインを表示するタイミング。	ページ読み込み時ページの読み込みが完了すると同時にプラグインの表示を開始します。ページにX秒間滞在ページの読み込み完了後、X秒経ってからプラグインの表示を開始します
配信頻度	訪問者がプラグインを目にする頻度。訪問回数の判定にはブラウザのCookieを使用します。	訪問のたびに表示 1日1回 1回のみ配信

5. プラグインをプレビュー

プレビュー方法は2通りあります

エディター内でプレビュー
編集中は、エディター自体にシミュレーターのプレビュー機能が用意されており、スマートフォン版・ウェブ版の2つの表示モードを切り替えられます。
実際のサイト上でプレビュー
【プレビュー】ボタンを押すと、貴社サイトのURL（例：トップページのURL）を入力できます。入力後プレビューボタンで確認すると、設定したURLが自動的に開き、現在設定中のプラグインを確認しながらクリックテストができます。

補足説明：このプレビューモードはシステムが自動生成する専用URLでのみ、設定中のプラグインが表示される仕組みで、正式にサイトへ公開されたことを意味するものではありません。このURLは他の担当者にも共有し、一緒にプレビューしていただくことができます。

6. 公開する

テストで問題がなければ、【公開】ボタンを押してウェブプッシュ通知を稼働させましょう。

スケジュールを設定している場合は、公開後、設定したスケジュールに沿って表示が開始されます。

ウェブプッシュ通知（ポップアップ）の設定方法