管理者マニュアル: カスタムスクリプト
概要
管理者は、外部サービスのスクリプトタグをCAMPUSに埋め込むことができます。Google Analytics、チャットボット、A/Bテストツールなど、さまざまな外部サービスを統合可能です。
対象ユーザー: 管理者のみ 対象プラン: Standard / Tester プラン（Freeプランでは利用不可） 登録上限: 5件まで
1. カスタムスクリプトとは
1.1 機能概要
カスタムスクリプトは、外部サービスから提供されるJavaScriptコードをCAMPUSのページに埋め込む機能です。
活用例:
- Google Analytics - アクセス解析
- Channel Talk / Intercom - チャットサポート
- Hotjar - ヒートマップ分析
- Google Tag Manager - タグ一元管理
- Optimizely - A/Bテスト
1.2 プランによる制限
| プラン | カスタムスクリプト |
|---|---|
| Free | 利用不可(0件) |
| Standard | 5件まで |
| Tester | 5件まで |
詳細は プラン別機能 を参照してください。
2. カスタムスクリプトの管理ページを開く
2.1 アクセス方法
- チーム編集ページを開く（
/teams/チーム名/edit） - 「カスタムスクリプト管理」セクションまでスクロール（Standard / Tester プランのみ表示されます）
- セクション内にカスタムスクリプト一覧が表示される（このセクション内で作成・編集・削除・有効化/無効化ができます）
または、直接以下のURLにアクセスすると、専用のカスタムスクリプト管理ページが開きます:
/teams/チーム名/custom-scripts
3. カスタムスクリプトの作成
3.1 新規作成手順
- チーム編集ページの「カスタムスクリプト管理」セクション（または専用の管理ページ）で 「新規作成」ボタンをクリック
- 入力フォームが表示される
- 以下の項目を入力:
3.1.1 入力項目
| 項目 | 必須 | 説明 | 例 |
|---|---|---|---|
| 名前 | ✅ | スクリプトの識別名(最大100文字) | Channel Talk |
| 説明 | - | 用途や目的(最大500文字) | カスタマーサポート用チャット |
| 埋め込み位置 | ✅ | <head>内 or </body>直前 |
</body>直前(推奨) |
| スクリプトコード | ✅ | 外部サービスから提供されたコード(最大10,000文字) | <script>...</script> |
| 有効化 | - | チェックを入れると即座に有効化 | ✅ |
3.1.2 埋め込み位置の選択
| 位置 | 説明 | 推奨ケース |
|---|---|---|
<head>内 |
ページの読み込み時に最初に実行 | Google Tag Manager、メタタグ系 |
</body>直前 |
ページの表示後に実行(推奨) | Google Analytics、チャットボット |
推奨: 迷った場合は </body>直前 を選択してください。ページの読み込み速度に影響しません。
- 「作成」ボタンをクリック
- スクリプトが作成され、有効化した場合は即座に全ページに埋め込まれる
4. カスタムスクリプトの編集・削除
4.1 編集手順
- カスタムスクリプト一覧から対象スクリプトの 「編集」ボタンをクリック
- 入力内容を変更
- 「更新」ボタンをクリック
4.2 有効化/無効化
スクリプトを削除せずに一時的に無効化できます。
- カスタムスクリプト一覧から対象スクリプトの 「無効化」ボタンをクリック
- 即座に無効化され、ページへの埋め込みが停止される
再有効化: 「有効化」ボタンをクリックすると、再びページに埋め込まれます。
4.3 削除手順
- カスタムスクリプト一覧から対象スクリプトの 「削除」ボタンをクリック
- 確認ダイアログが表示される:
※ 専用の管理ページ（
本当に削除しますか？/teams/チーム名/custom-scripts）から削除する場合は「[スクリプト名]を削除してもよろしいですか？」と表示されます - 「OK」をクリック
- スクリプトが削除され、ページへの埋め込みが停止される
注意: 削除は取り消せません。
5. カスタムスクリプトの具体例
5.1 Google Analytics 4(GA4)
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
- 埋め込み位置:
</body>直前(推奨) - 用途: アクセス解析、ページビュー計測
5.2 Channel Talk(チャットサポート)
<script>
(function () {
var w = window;
if (w.ChannelIO) {
return w.console.error('ChannelIO script included twice.');
}
var ch = function () {
ch.c(arguments);
};
ch.q = [];
ch.c = function (args) {
ch.q.push(args);
};
w.ChannelIO = ch;
function l() {
if (w.ChannelIOInitialized) {
return;
}
w.ChannelIOInitialized = true;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (document.readyState === 'complete') {
l();
} else {
w.addEventListener('DOMContentLoaded', l);
w.addEventListener('load', l);
}
})();
ChannelIO('boot', {
pluginKey: 'YOUR_PLUGIN_KEY',
});
</script>
- 埋め込み位置:
</body>直前 - 用途: カスタマーサポート、チャット
5.3 Google Tag Manager(GTM)
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->
- 埋め込み位置:
<head>内 - 用途: タグ一元管理
6. セキュリティ上の注意
6.1 信頼できるサービスのみ使用
カスタムスクリプトはそのまま実行されるため、以下に注意してください:
- ✅ 公式サイトから提供されたコードのみ使用
- ✅ 信頼できる外部サービスのみ統合
- ❌ 出所不明のスクリプトは絶対に使用しない
- ❌ 個人情報を送信するスクリプトには注意
6.2 動作確認
スクリプトを追加した後は、必ず以下を確認してください:
- ページが正常に表示される
- コンソールエラーが出ていない
- 外部サービスが正しく動作している
確認方法:
- ブラウザのデベロッパーツールを開く(F12キー)
- Consoleタブでエラーがないか確認
- Networkタブでスクリプトが読み込まれているか確認
7. よくある質問
Q1: カスタムスクリプトが動作しない
A: 以下を確認してください:
- 有効化されているか? - 一覧ページで「有効」と表示されているか
- 埋め込み位置は正しいか? - サービスのドキュメントを確認
- コードに誤りがないか? - 公式サイトからコピペし直す
- ブラウザキャッシュをクリア - Ctrl+Shift+Deleteでキャッシュ削除
Q2: 5件以上のスクリプトを追加したい
A: 現在の仕様では5件が上限です。代わりに以下の方法を検討してください:
- Google Tag Manager(GTM)を使用 - GTM経由で複数のタグを一元管理
- 不要なスクリプトを削除 - 使っていないスクリプトを削除して枠を確保
Q3: Freeプランでカスタムスクリプトを使いたい
A: Freeプランではカスタムスクリプト機能は利用できません。StandardプランまたはTesterプランにアップグレードしてください。
詳細は プラン別機能 を参照してください。
Q4: スクリプトがすべてのページに表示される?
A: はい、有効化されたカスタムスクリプトはチーム内のすべてのページに埋め込まれます。特定のページだけに表示することはできません。
Q5: スクリプトの実行順序を制御したい
A: カスタムスクリプトは作成日時の古い順に実行されます。順序を変更したい場合は、一度削除して再作成してください。
Q6: スクリプトコードが長すぎてエラーになる
A: スクリプトコードは最大10,000文字です。それ以上の場合は、外部ファイルを読み込む形式に変更してください。
例:
<script src="https://example.com/your-script.js"></script>
8. トラブルシューティング
8.1 「カスタムスクリプトは5件まで登録できます」と表示される
原因: 既に5件のスクリプトが登録されている
対処法: 不要なスクリプトを削除してから再度作成してください
8.2 ページの読み込みが遅くなった
原因: <head>内に重いスクリプトを埋め込んでいる
対処法: 埋め込み位置を</body>直前に変更してください
8.3 他のスクリプトとの競合
原因: 複数のスクリプトが干渉している
対処法:
- 一度すべてのスクリプトを無効化
- 1つずつ有効化して、どのスクリプトが原因か特定
- 競合するスクリプトを削除または設定を調整
9. ベストプラクティス
9.1 スクリプト管理のコツ
- わかりやすい名前をつける - 「スクリプト1」ではなく「Google Analytics」
- 説明を記入する - 後から見返したときに用途がわかるように
- 必要なものだけ有効化 - 使っていないスクリプトは無効化または削除
- GTMを活用 - 複数のタグはGoogle Tag Managerで一元管理
9.2 パフォーマンス最適化
- 非同期読み込みを推奨 -
async属性をつける </body>直前を優先 - ページの表示速度を優先- 不要なスクリプトは削除 - 使っていないサービスのスクリプトは削除
9.3 セキュリティ対策
- 公式サイトからコピー - 必ず公式ドキュメントからコードを取得
- 定期的に見直し - 使っていないサービスのスクリプトは削除
- 権限管理 - 管理者のみがスクリプトを追加できるようにする