JavaScriptでカスタムトリガーを使用するには

カスタムトリガーを使うと、独自のJavaScriptを使ってアンケートを表示できます。リンクのクリック、ボタンのクリック、スクロール位置など、任意のイベントをきっかけに表示させることが可能です。

手順

アンケートエディタの 「配信」 セクションで 「カスタムトリガー」 を選択します。専用のJavaScriptスニペットとアンケートIDが表示されます。
このスニペットを自分のJavaScriptと組み合わせてカスタムトリガーを作成します。この作業にはウェブサイトのHTMLを編集できる権限が必要です。権限がない場合は、ウェブ担当者や開発者に依頼してください。
以下の例を自分のサイトに合わせて使う際は、要素のクラス名と `triggerSurvey` のコードをご自身のサイト・アンケートに合わせて変更してください。

例：リンクをクリックしたときにアンケートを表示する

<a href="javascript:asklayer.triggerSurvey('tpJ3q30jOmnUoNtucrtZ')">MyLink</a>

例：ボタン（クラス名 `my-button`）をクリックしたときにアンケートを表示する

<script>
document.addEventListener('DOMContentLoaded', () => {     
  const button = document.querySelector('.my-button');
  button.onclick = function(e){
    e.preventDefault();
    // 以下の部分を、エディタからコピーした自分専用のカスタムトリガーコードに置き換えてください
    asklayer.triggerSurvey('kBbharRQbmM2rDKw2wUA');
  };
});
</script>

例：特定の画像（クラス名 `my-image`）までスクロールしたときにアンケートを表示する

画像の上端がウィンドウの中央に達したタイミングで表示されます。

<script>
document.addEventListener('DOMContentLoaded', () => {
  const element = document.querySelector('.my-image');
  const offset =   window.innerHeight / 2;
  
  let fired = false, ticking = false;
  
  document.addEventListener('scroll',()=>{
    if(ticking || fired || !element || typeof asklayer === 'undefined') return;
    
    window.requestAnimationFrame(() => {
      const top = element.getBoundingClientRect().top;
      if(top < offset){
        // 以下の部分を、エディタからコピーした自分専用のカスタムトリガーコードに置き換えてください
        asklayer.triggerSurvey('kBbharRQbmM2rDKw2wUA');
        fired = true;
      }
      ticking = false;
    });
    ticking = true;
  });
});
</script>