Adding custom scripts

This page applies to Apigee and Apigee hybrid.

View Apigee Edge documentation.

To add custom JavaScript code or HTML content before the <body> tag on each page in your portal:

Cloud Console UI

  1. In the Apigee in Cloud console, go to the Distribution > Portals page.

    Go to Portals

  2. Click Settings in the navigation menu.

  3. In the Custom Scripts section, enter the custom JavaScript code in the text box. You can include multiple scripts.

  4. Click Save.

Classic UI

  1. Select Publish > Portals and select your portal.
  2. Click Settings on the landing page. Alternatively, you can select Settings in the drop-down in the top navigation bar.
  3. Click the Custom Scripts tab.
  4. In the Custom Scripts section, enter the custom JavaScript code in the text box. You can include multiple scripts.
  5. Click Save.

The following sections provide examples of custom scripts:

See also Configuring analytics tracking.

Executing a custom script during an onLoad or onUnload JavaScript event

Define custom scripts to be executed when each page in your portal:

  • Loads into the DOM using the onLoad JavaScript event.
  • Is navigated away from using the onUnload JavaScript event.

Your custom function must be defined as part of the portal.pageEventListeners in the global namespace (declared on the window variable).

Both the onLoad and onUnload events receive as their first parameters the current path of the page (/quickstart, for example). The onUnload function receives as its second parameter the return value from the onLoad call enabling context to be passed between the two events. Use onUnload to clean up the event listeners that are no longer required and perform other clean up activities.

For example:

<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>

Custom scripts may be used to implement a cookie consent solution. There are a number of popular open source options implemented in JavaScript; select one that meets your specific compliance requirements.

For example, the following script uses the Cookie Info Script.

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