# Javascriptでポップアップの表示を指定

キャンペーン設定では、ユーザーがサイトでの行動に合わせて、適切なタイミングで表示させることができます。その中に、ポップアップと固定バーはJavascriptコードによりタイミングを更に自由にコントロールする方法があります。詳しくは以下でご紹介いたします。

{% hint style="info" %}
**Note：**Javascriptコードでの制御はポップアップと固定バーのみに適用され、サイト編集では適用されません。また1セッション内では複数回発火させることができます。
{% endhint %}

### 設定方法 <a href="#id-0-toc-title" id="id-0-toc-title"></a>

1. 添付画像のように、クリエイティブ作成後「表示/停止の条件」の設定でJavascriptコードによる表示を選択してください。

<figure><img src="https://help.ptengine.jp/wp-content/uploads/2021/02/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2021-12-28-18.53.40.png" alt=""><figcaption></figcaption></figure>

2. 下記のようなJavascriptコードでポップアップもしくは固定バーの発火をコントロールを実現できます。

   `ptengine && ptengine.showEngagement('xxxxxxxx');`
3. **Note：**\
   ・IDはクリエイティブ、デバイス、パターン毎にコードが異なるため、常に正しいものを取得しましょう。\
   ・A/Bテストを行う場合、各パターンそれぞれのコードを全部実装する必要があります。\
   ・PC＆SPの二つのデバイスにキャンペーンを設定する場合、各デバイスそれぞれのコードを全て実装する必要があります。
4. Javascriptコードをコピーした上表示させたいページに実装し、表示させたいタイミングで発火させてください。
5. キャンペーン設定完了し保存してください。

### 実装例 <a href="#id-1-toc-title" id="id-1-toc-title"></a>

1. HTMLに追加する場合

`<button id="loginBtn" onclick="ptengine && ptengine.showEngagement('xxxxxxxx')">login</button>`

2. ネイティブJavascriptに追加する場合

`document.getElementById("loginBtn").addEventListener("click", function(){ ptengine && ptengine.showEngagement('xxxxxxxx) });`

<br>