カスタムトリガー設定と実装例

DataPushのポップアップ設定画面には、「表示のタイミング」という項目があり、その中には「カスタムトリガーで表示する」というオプションが含まれています。サイト上の設定で対応できない動きを実装したい場合に使用します。

前提の条件

カスタムトリガーを使用する場合は、必ず全てのチェックをオフまたは未選択の状態にしてください。
画面上で設定している動作と被るため、オフ・未選択にする必要があります。

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

• 画面の設定では対応できない動きを実現したい場合
• なにかしらのデータを取得して表示・非表示を切り替える必要がある場合
• 条件を満たす場合のみ表示させたい場合

など画面でできないことを実現する場合に利用されるものになります。そのためコードの記述が必要になったりサイト側の改修などが必要になります。

実装前の準備

事前にカスタムトリガーのコードをコピーしておいてください。

取得しておいたコードに対してJavaScriptで独自のコードを記述することで独自の動きや条件にあった表示が可能になります。

実装例

リンクをクリックした時に表示させたい場合の例

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

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

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

参考に記載したコードをポップアップを表示させたいサイトに記述していただくと動作するようになります。
※HTMLやJavaScriptに対してのコードに関してはお客様の実装環境によって異なるため具体的なコードのご提供は行なっておりません。予めご了承ください。

HTMLやJavaScriptなどで独自にカスタマイズしていただくことが前提になるため、エンジニアの方が作業設置されるのが好ましいです。