ヘルプセンター検索を外部フォームに連動させる（Google Tag Manager版）
Google Tag Manager （以下、GTM）を利用し外部フォームとヘルプセンター検索を連動させる方法を説明します。
フォームの入力内容に応じて、関連するヘルプ記事がリアルタイムで表示される機能を実装できます。
実装例
STEP1：GTMのタグを作成する
GTMの「タグ」で「カスタムHTML」を作成してください。
STEP2：カスタムHTMLの設定
以下のコードを参考にして「カスタムHTML」を設定してください。
<script>
/* [A]読み込みコード */
(function(){var w=window,d=document;if(!w.Helpdog){var h=function(){h.c(arguments)};h.q=[],h.c=function(e){h.q.push(e)},w.Helpdog=h;var l=function(){var s=d.createElement("script");s.type="text/javascript",s.async=!0,s.src="https://sdk.helpdog.ai/v1/script.js";var x=d.getElementsByTagName("script")[0];x.parentNode.insertBefore(s,x)};"loading"===d.readyState?d.addEventListener("DOMContentLoaded",l):l()}})();
/* [B]フォーム検索連携を導入したいページに応じて以下のコードは書き換えてください */
if (!document.getElementById('hd-instant-search')) { // [X]
var markerEl = document.getElementById('something');
var targetEl = document.createElement('div');
targetEl.id = 'hd-instant-search'; // [X]
markerEl.after(targetEl);
}
/* [C]設置コード */
Helpdog('site.instantSearch', {
siteId: '{埋め込みサイトID}',
target: '#hd-instant-search', // [X]と同じであれば任意に変更して可能
queryFields: '{セレクター}',
});
</script>
[A]については、そのまま記述してください。
[B]については、お客様のページ構成に応じて、フォーム検索連携を設置するためのdivを用意する必要があります。
[C]については引数を指定し、Helpdog関数を実行してください。
必要な引数は以下の3つです。
siteId: ヘルプドッグの埋め込みサイトID（管理画面で確認）
target: 検索結果を表示するdivのセレクタ
queryFields: 検索対象のフォームフィールドのセレクター（カンマ区切り）
STEP3：トリガーの設定
GTMのトリガーは任意の設定を行ってください。
