> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/faq/experience-edit/javascript-popup.md).

# 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="/files/a5mXmQlkENr4ZDBN4QCz" 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>