JavaScriptファイルを作成してHubSpotに追加する

デザインマネージャー内でJavaScriptファイルを作成して追加し、HubSpotでホスティングされているコンテンツの機能をカスタマイズします。JavaScriptファイルを作成し、テンプレートに添付するか、ドメイン全体または個々のページに追加できます。

例えば、JavaScriptファイルを使用してインタラクティブな要素を追加したり、サードパーティーのスクリプトを連携したり、標準モジュール以外のページ動作をカスタマイズしたりすることができます。 

始める前に

JavaScript ファイルを操作する前に、次の要件と考慮事項を確認してください。

制限事項と考慮事項について

• 変更内容を公開すると、関連するテンプレートまたはページで更新が直ちに公開されます。
• ドメインレベルでJavaScriptを追加すると、そのドメイン上のHubSpotでホスティングされている全てのページにスクリプトが適用されます。

JavaScriptファイルの作成

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、[ ファイル ]ドロップダウンメニューをクリックし、[ 新規ファイル]を選択します。
3. ダイアログボックスで、［今日は何を作りたいですか？］ドロップダウンメニューをクリックし、［JavaScript］を選択します。［次へ］をクリックします。
4. [ファイル名]フィールドにJavaScriptファイル の名前を入力します 。
5. ファイルの場所を更新するには、ファイルの場所セクションで、変更をクリックし、ファイルを追加するフォルダーを選択します。
6. ［作成］をクリックします。 
7. コードエディターにJavaScriptを入力します。
8. ESLintを有効にしている場合は、[ 出力を表示]スイッチをオンに切り替えて、JavaScriptの警告またはエラーを表示します。

9. 完了したら、右上の [変更を公開 ]をクリックします。

ドラッグ&ドロップテンプレートにJavaScriptファイルを添付する

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、更新する テンプレート をクリックします。
3. 右側のインスペクターで、「編集」タブをクリックします。
4. [リンクされているJavaScriptファイル] セクションで、[追加] ドロップダウンメニューをクリックし、JavaScript ファイルを選択します。
5. 完了したら、右上の［変更を公開］をクリックします。

コード化されたテンプレートにJavaScriptファイルを添付する

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、更新する テンプレート をクリックします。
3. コードエディターに require_js HubL関数を入力します。require_js HubL関数の使用について詳細をご確認ください。

JavaScriptファイルをHubSpotページに追加する

公開URLを使用して、HubSpotでホスティングされるドメインのすべてのページまたは個別のページにJavaScriptファイルを追加します。

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、JavaScriptファイルの名前をクリックします。次に、[ アクション ]ドロップダウンメニューをクリックし、[ 公開URLをコピー]を選択します。

JavaScriptファイルをドメインの全てのページに追加する

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
2. 左サイドバーのメニューで、コンテンツ > ページに移動します。
3. [設定を編集するドメインを選択 ]ドロップダウンメニューをクリックし、JavaScriptファイルを追加する ドメイン を選択します。接続済みの全てのドメインにJavaScriptファイルを適用するには、[ 全てのドメインの既定の設定]を選択します。
   
4. [サイトフッターHTML]セクションで、スクリプトタグのソースの値として公開URLを貼り付けます。 

<!-- start example.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End example.js-->

5. 完了したら、左下の［保存］をクリックします。

JavaScriptファイルを個々のページに追加する

注:スターターテンプレートでは詳細設定は利用できません。

1. 目的のコンテンツに移動します。
   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. ページの名前をクリックします。
3. コンテンツエディターで［設定］メニューをクリックし、［詳細］を選択します。
4. ダイアログボックスの[フッターHTML ]セクションに、スクリプトタグのソースの値として 公開URL を貼り付けます。

<!-- start example.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End example.js-->

5. 完了したら、右上の [公開 ]または[更新]をクリックします。