外部Webサイトにウィジェットを設置する（Google Tag Manager版）

読了時間：約 3 分

Google Tag Manager （以下、GTM）を利用し外部のWebサイトにウィジェットを設置する方法を説明します。

STEP1：GTMのタグを作成する

GTMの「タグ」で「カスタムHTML」を作成してください。

STEP2：カスタムHTMLの設定

以下のコードを参考にして「カスタムHTML」を設定してください。

<script>
(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()}})();

Helpdog('widget.embed', {
widgetId: '【widgetId】',
triggerSelector: '【triggerSelector】',
showFloatingButton: '【showFloatingButton】'
});
</script>

設定可能項目

パラメータ	必須かどうか	説明
widgetId	必須項目です	ウィジェットによって異なる識別子です。
triggerSelector	任意	Webページ上の任意の要素（ボタンなど）のクリックにより、ウィジェットを開閉することができます。 HTML属性のidやclassを記述してください。
showFloatingButton	任意	ウィジェットを設置するが、ウィジェットのボタンを表示したくない場合に、false にしてください。 triggerSelectorと併用することで、動作をコントロールできます。デフォルトでは true です。

STEP3：トリガーの設定

GTMのトリガーは任意の設定を行ってください。