Notiondesk ヘルプセンターにカスタム JavaScript を追加することで、サードパーティ サービスを統合したり、カスタム イベントを追跡したり、標準では利用できないインタラクティブな機能を追加したりできます。
セキュリティ上の理由から、カスタムJavaScriptはカスタムドメインでのみ許可されています。
カスタムJavaScriptでできること
JavaScriptを使用すると、ヘルプセンターのデフォルト機能を超えて拡張できます。一般的な使用例は次のとおりです。
- サードパーティ統合: Notiondesk がネイティブにサポートしていないサービスと接続します。
- カスタム分析トラッキング: Mixpanel、Hotjar、Segmentなどのツールにイベントを送信して、特定のユーザーアクションを追跡します。
- インタラクティブ機能:ツールチップ、アナウンスバナー、カスタムナビゲーション動作などの動的な要素を追加できます。
- マーケティングおよびコンバージョンツール:リターゲティングピクセル、A/Bテストスクリプト、またはリード獲得ウィジェットを埋め込む。
カスタムJavaScriptを追加する方法
- 設定 → カスタマイズに移動します。
- 「詳細設定」セクションを開きます。
- カスタムJavaScriptテキストボックスにJavaScriptコードを貼り付けてください。
- 「変更を保存」をクリックしてください。
スクリプトは、ヘルプセンターの次回ページ更新後にすべてのページで読み込まれます。
例
Hotjarトラッキングスクリプトを追加する
YOUR_HOTJAR_ID を実際の Hotjar サイト ID に置き換えてください。
カスタムのお知らせバナーを表示する
カスタムイベントを使用して記事の閲覧数を追跡します
ベストプラクティス
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var banner = document.createElement('div');
banner.innerHTML = 'We are currently experiencing delays. <a href="/status">Check status</a>';
banner.style.cssText = 'background:#FEF3C7;padding:10px;text-align:center;font-size:14px;';
document.body.prepend(banner);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var title = document.title;
var path = window.location.pathname;
// Replace with your own analytics call
console.log('Article viewed:', title, path);
});
</script>
- 公開前にテストしてください。エラーを早期に発見するために、まずブラウザのコンソールでスクリプトを実行してみてください。
- スクリプトは軽量に保ちましょう。重いスクリプトはページの読み込み速度を低下させ、読者の体験を損なう可能性があります。
- コア要素の変更は避けてください。JavaScriptを使用してヘルプセンターのメインレイアウトやナビゲーションを変更すると、今後のアップデートが動作しなくなる可能性があります。