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

カスタムトリガーを利用するディスプレイのステータスは「Live」である必要があります。

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





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



HTMLを編集できる場合は、例を参考にタグを挿入してください。先ほどコピーしたコード、要素のクラス等を置き換えるのを忘れないでください。
HTMLを編集できない場合はウェブ管理者にお問い合わせください。

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

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

//ブラウザーバックの検知を有効にする
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

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

更新日 21/02/2024