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でヘルプセンターのメインレイアウトやナビゲーションを変更すると、将来のNotiondeskの更新が機能しなくなる可能性があります。