カスタムトリガーを使用する

1. トリガー内のすべてのスイッチをオフにしてから、「トリガー用のコードを取得」をクリックします。

2. クリックすると以下のモーダルが開くので、コードを確認します。このコードが実行されるとディスプレイが表示されます。

ご利用例

上記のコードは最も単純にディスプレイを表示するだけのコードであり、実際には、あるボタンが押された時に表示する、のように利用されるケースがほとんどです。

以下に例を示しますので、ご参考になさってください。

promolayer.triggerDisplay('xxx')　の xxx には、ディスプレイのIDが入ります。　適宜読み替えてください。

あるアンカーリンクをクリックするとポップアップを表示する例

<a href="javascript:promolayer.triggerDisplay('tpJ3q30jOmnUoNtucrtZ')">リンク</a>

あるボタン要素（クラス名: my-button）をクリックするとポップアップを表示する例

<script>
  const button = document.querySelector('.my-button');
  button.addEventListener('click', (e) => {
    e.preventDefault();
    promolayer.triggerDisplay('tpJ3q30jOmnUoNtucrtZ');
  });
</script>

ページにある要素(クラス名: my-header)が存在するとき、ページロードから五秒後にポップアップを表示する例

<script>
  const elem = document.querySelector('.my-header');
  if(elem){
      document.addEventListener('promolayer-ontimeelapsed-5', ()=>{
        promolayer.triggerDisplay('tpJ3q30jOmnUoNtucrtZ');
      })
  }

</script>

スクロールして、ある画像(クラス名: my-image)の上端がウインドウの中央に位置した時にポップアップを表示する例

<script>
window.addEventListener('promolayer-onready', () => {
  const element = document.querySelector('.my-image');
  const offset =   window.innerHeight / 2;
	
  let fired = false, ticking = false;
	
  document.addEventListener('scroll',()=>{
    if(ticking || fired || !element ) return;
		
    window.requestAnimationFrame(() => {
      const top = element.getBoundingClientRect().top;
      if(top < offset){
        promolayer.triggerDisplay('nAN2B2hgNVLwxz4qlfDb');
        fired = true;
      }
      ticking = false;
    });
    ticking = true;
  });
});
</script>

機能・イベント等

イベント

//使い方
window.addEventListener('promolayer-onexitintent', function()....のようにお使いください。

//promolayerオブジェクトが利用可能になったときに発火
promolayer-onready

//ページから離れようとした時に発火
promolayer-onexitintent　

//ブラウザーバックをしようとした時に発火（promolayer.enableBrowserBackIntent()が先にコールされている必要があります）
promolayer-onbrowserbackintent　

//サイト滞在時間が{seconds}秒経過後発火  ex. promolayer-ontimeelapsed-5 なら5秒後に発火　
promolayer-ontimeelapsed-{seconds}

//無操作で{seconds}秒経過後発火  ex. promolayer-onidletimeelapsed-5 なら5秒後に発火　
promolayer-onidletimeelapsed-{seconds}

//毎秒現在のスクロールポジションを％で通知
promolayer-onscroll
window.addEventListener('promolayer-onscroll', function(e){
　console.log(e.detail) // => 38　
})
　

ファンクション

//引数に渡されたディスプレイを表示する
promolayer.triggerDisplay(displayId) 

//引数に渡されたディスプレイが表示されたことがあるかどうか
promolayer.hasDisplayShown(displayId) //=> true | false

//ブラウザバックの検知を有効にする
promolayer.enableBrowserBackIntent()

// ディスプレイを閉じる (第二引数はtrueだと、ティーザーがある場合でも無視して非表示にします。)
promolayer.closeDisplay(displayid,[ignoreTeaser]) 

オプション

//triggerDisplayに渡すオプション　ex. promolayer.triggerDisplay(displayId, {applyRules:true})

applyRules: ディスプレイの「ルール」で設定された(トリガー以外の)ルールを考慮する(デフォルト: false)

markAsTriggered: applyRules:trueの時、ページを遷移しない限り、一度トリガーされたディスプレイは二度トリガーされなくなる(デフォルト: false)

replace: ディスプレイのテキストコンテンツ内の二重ブラケットに囲まれた文字列を置換する

例：名前とメールアドレスを動的に置換する

テキストエディター内での表示：

私の名前は {{NAME}}、 メールアドレスは {{EMAIL}} 

これをreplaceオプションつきでトリガーする。

 promolayer.triggerDisplay(displayId, {
   replace: [
       {find: 'NAME', replace: 'PROMOLAYER'},
       {find: 'EMAIL', replace: 'hello@promolayer.io'}
  ]
})

実際に表示されるテキスト：

私の名前は PROMOLAYER、 メールアドレスは hello@promolayer.io

//注）二重ブラケット内に使用できる文字はアルファベットとアンダースコアのみです。

更新日 16/06/2025