お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
HubSpot に JavaScript ファイルを追加する方法
更新日時 2023年 1月 19日
デザインマネージャーでJavaScriptファイルをホストし、編集することができます。JavaScriptファイルを作成し、テンプレートやドメインにリンクする方法について説明します。
JavaScript ファイルを作成する
- HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
- 左サイドバーのメニューから、「ファイル」 > 「新規ファイル」をクリックします。フォルダフォルダアイコンをクリックして、メニューを展開する必要がある場合があります。
- ダイアログボックスで、「今日は何を作りたいですか?ドロップダウンメニューをクリックし、JavaScriptを選択します。

- [次へ]をクリックします。
- ファイル名の欄には、JavaScriptのファイル名を入力します。
- ファイルの場所を更新するには、ファイルの場所セクションで、変更をクリックして、ファイルを追加するフォルダーを選択します。
- [作成]をクリックします。
- JavaScriptをコードエディターに入力するか、貼り付けます。
- ESLintを有効にしている場合は、クリックして[出力を表示]スイッチをオンにすることによって、JavaScript警告またはエラーを表示できます。
- 右上の [変更を公開] をクリックして変更内容を公開します。
テンプレートにJavaScriptファイルを添付する
- 左側のファインダーで、更新したいテンプレートをクリックします。
- 右側のインスペクタで、「編集」タブをクリックします。
- [リンクされているJavaScriptファイル] セクションで、[追加] ドロップダウンメニューをクリックし、JavaScript ファイルを選択します。
- 右上の [変更を公開] をクリックして変更内容を公開します。
HubSpotのページでJavaScriptファイルをインクルードする
公開URLを使用することによって、HubSpotでホスティングされるドメインのすべてのページまたは個別のページにJavaScriptファイルを含めることができます。
ファイルの公開URLにアクセスするため。
- 左側のサイドバーメニューで、JavaScript ファイルを選択します。
- [アクション] > [公開 URL をコピー] をクリックします。
- HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
- 左のサイドバーメニューで [ウェブサイト] > [ページ] に移動します。
- Choose a domain to edit its settingsドロップダウンメニューをクリックし、JavaScript ファイルを追加するドメインを選択します。接続されているすべてのドメインにJavaScriptファイルを適用させたい場合は、Default settings for all domainsを選択します。
- [サイトフッターHTML]セクションで、公開URLをスクリプトタグのソースの値として貼り付けます。
<!-- start Main.js Do Not Remove -->
<script src='ファイルの公開URLをここに挿入'></script>
<!---End Main.js-->
- [保存]をクリックします。
または、個別のページにファイルを追加するには、次の手順を実行します。
- HubSpotアカウントで、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]または[ランディングページ]の順に進みます。
- 編集するページの上にカーソルを置き、[編集]をクリックします。
- ページエディターで、[設定]タブをクリックします。
- [詳細オプション]をクリックします。
- Footer HTMLセクションで、scriptタグのsourceの値として、公開URLを貼り付けます。
<!-- start Main.js Do Not Remove -->
<script src='ファイルの公開URLをここに挿入'></script>
<!---End Main.js-->
- 変更内容をライブページに公開するには、右上の[更新]をクリックします。
Design Manager
貴重なご意見をありがとうございました。
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。
関連記事
-
GoogleタグマネージャーのコードをHubSpotコンテンツに追加する
...
ナレッジベース -
カスタム コード テンプレートを作成する
デベロッパーは、HTMLを使用してブログ、ウェブサイトページ、ランディングページ、メールテンプレートを一から構築できます。または、ドラッグ&ドロップテンプレートのレイアウトをHTMLに複製...
ナレッジベース -
スマート コンテンツ ルールを作成して管理する
スマート コンテンツ モジュールには、閲覧者カテゴリーに基づいて異なるバージョンのコンテンツが表示されます。例えば、特定の国からの訪問者またはモバイルデバイスで閲覧している訪問者に代替案を作成することができます。 ...
ナレッジベース