メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

HubSpot に JavaScript ファイルを追加する方法

更新日時 2023年 11月 3日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

デザインマネージャーでJavaScriptファイルをホスティングし、編集することができます。JavaScriptファイルを作成し、テンプレートやドメインにリンクする方法を学びます。

JavaScriptファイルの作成

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
  • 左サイドバーのメニューで、ファイル > 新規ファイルをクリックします。folderフォルダーアイコンをクリックしてメニューを展開する必要があるかもしれません。
  • ダイアログボックスで、[今日は何を作りたいですか?]ドロップダウンメニューをクリックし、[JavaScript]を選択します。

design-manager-new-file-javascript (デザインマネージャー・ニューファイル・ジャバスクリプト)
  • [次へ]をクリックします。
  • ファイル名の欄には、JavaScriptのファイル名を入力します。
  • ファイルの場所を更新するには、ファイルの場所セクションで、変更をクリックし、ファイルを追加するフォルダーを選択します。

design-manager-new-javascript-file (デザインマネージャー・ニュージャバスクリプトファイル)

  • [作成]をクリックします。 
  • JavaScriptをコードエディターに入力するか、ペーストしてください。
  • ESLintを有効にしている場合、「出力を表示」スイッチをクリックすることで、JavaScriptの警告やエラーを確認することができます。

    design-manager-javascript-show-output
  • 右上の [変更を公開] をクリックして変更内容を公開します。

JavaScriptファイルをテンプレートに添付する

  • 左側のファインダーで、更新したいテンプレートをクリックします。
  • 右側のインスペクターで、「編集」タブをクリックします。
  • [リンクされているJavaScriptファイル] セクションで、[追加] ドロップダウンメニューをクリックし、JavaScript ファイルを選択します。
  • 右上の [変更を公開] をクリックして変更内容を公開します。

HubSpotのページでJavaScriptファイルをインクルードする

JavaScriptファイルは、HubSpotがホスティングするドメインの全ページに含めることも、公開URLを使用して個別のページに含めることもできます。

ファイルの公開URLにアクセスする:

  • 左サイドバーのメニューで、JavaScriptファイルを選択します。
  • 「アクション」 > 「公開URLをコピー」をクリックする。

design-manager-add-javascript-file (デザインマネージャー・アドジャバスクリプトファイル)

このファイルをドメイン上の全てのHubSpotページに追加するには、以下の手順に従います:
  • HubSpotアカウントにて、メインのナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  • 左のサイドバーメニューで、[ウェブサイト]>[ページ]に移動します。
  • 「設定を編集するドメインを選択:」ドロップダウンメニューをクリックし、JavaScript ファイルを追加するドメインを選択します。接続されている全てのドメインにJavaScriptファイルを適用する場合は、「全てのドメインの既定の設定」を選択します。
  • 「サイトフッターHTML」セクションに、公開URLを script タグの source の値として貼り付けます: 
<!-- start Main.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End Main.js-->
  • [保存]をクリックします。 

または、個別のページにファイルを追加するには、次の手順を実行します。

  • コンテンツを開きます。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
  • 編集したいページにカーソルを合わせ、Editをクリックします。
  • ページエディターで、Settingsメニューをクリックし、Advanced。.
  • ダイアログボックスの「Footer HTML」セクションで、スクリプトタグのソースの値として公開URLを貼り付けます:
<!-- start Main.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End Main.js-->
  • 右上で、PublishまたはUpdateをクリックする。 
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。