カスタム スクリプトの追加

このページは Apigee と Apigee ハイブリッドに適用されます。

Apigee Edge のドキュメントを表示する。

ポータルの各ページの <body> タグの前に、カスタムの JavaScript コードや HTML コンテンツを追加するには:

Cloud コンソールの UI

  1. Cloud コンソールの Apigee で、[配布] > [ポータル] ページに移動します。

    [ポータル] に移動

  2. ナビゲーション メニューの [設定] をクリックします。

  3. [カスタム スクリプト] セクションにあるテキスト ボックスに、カスタム JavaScript コードを入力します。複数のスクリプトを含めることができます。

  4. [保存] をクリックします。

従来の UI

  1. [公開] > [ポータル] を選択し、目的のポータルを選択します。
  2. ランディング ページの [設定] をクリックします。または、上部のナビゲーション バーにあるプルダウンから [設定] を選択することもできます。
  3. [Custom Scripts] タブをクリックします。
  4. [カスタム スクリプト] セクションにあるテキスト ボックスに、カスタム JavaScript コードを入力します。複数のスクリプトを含めることができます。
  5. [保存] をクリックします。

次のセクションでは、カスタム スクリプトの例を示します。

分析トラッキングの構成もご覧ください。

onLoad または onUnload の JavaScript イベント発生中にカスタム スクリプトを実行する

ポータルの各ページが次のような場合に実行されるカスタム スクリプトを定義します。

  • onLoad JavaScript イベントを使用して DOM に読み込む。
  • ポータルの各ページから離れたときに onUnload JavaScript イベントによって実行されるスクリプト。

カスタム関数は、window 変数で宣言されたグローバル名前空間内の portal.pageEventListeners の一部として定義する必要があります。

onLoad イベントと onUnload イベントはどちらも、最初のパラメータとしてページの現在のパス（例: /quickstart）を受け取ります。onUnload 関数は 2 番目のパラメータとして onLoad 呼び出しの戻り値を受け取るため、これら 2 つのイベントの間でコンテキストを受け渡すことができます。onUnload では、不要になったイベント リスナーなどのクリーンアップ処理を行います。

例:

<script>
window.portal = {};
window.portal.pageEventListeners = {
  onLoad: (path) => {
    if (path === '/quickstart') {
      // Change text content of first <p> element to something
      // else. (DOM must be loaded when onLoad is called)
      document.getElementsByTagName('p')[0].textContent =
          'Welcome to the quick start! Be sure to send us your feedback.';
      // print a custom message to the console every second while user is on
      // quickstart page.
      const interval =
          window.setInterval(() => console.log('Hello'), 1000);
      return interval;
    }
    return undefined;
  },
  onUnload: (path, contextReturnedFromOnLoad) => {
    if (contextReturnedFromOnLoad != null) {
      // Stop printing custom message to console every second.
      window.clearInterval(contextReturnedFromOnLoad)

    }
  },
};
</script>

Cookie 使用の同意ソリューションを実装するために、カスタム スクリプトを使用できます。JavaScript で実装されている一般的なオープンソース オプションが多数存在します。お客様のコンプライアンス要件を満たすものを選択してください。

たとえば、次のスクリプトでは Cookie Info Script を使用します。

<script type="text/javascript" id="cookieinfo" src="//cookieinfoscript.com/js/cookieinfo.min.js">
</script>