# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/faq/experience-edit/javascript-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.