<script>
window.portal={};window.portal.pageEventListeners={onLoad:(path)=>{if(path==='/quickstart'){//Changetextcontentoffirst<p>elementtosomething//else.(DOMmustbeloadedwhenonLoadiscalled)document.getElementsByTagName('p')[0].textContent='Welcome to the quick start! Be sure to send us your feedback.';//printacustommessagetotheconsoleeverysecondwhileuserison//quickstartpage.constinterval=window.setInterval(()=>console.log('Hello'),1000);returninterval;}returnundefined;},onUnload:(path,contextReturnedFromOnLoad)=>{if(contextReturnedFromOnLoad!=null){//Stopprintingcustommessagetoconsoleeverysecond.window.clearInterval(contextReturnedFromOnLoad)}},};
</script>
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["很难理解","hardToUnderstand","thumb-down"],["信息或示例代码不正确","incorrectInformationOrSampleCode","thumb-down"],["没有我需要的信息/示例","missingTheInformationSamplesINeed","thumb-down"],["翻译问题","translationIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-08-07。"],[[["\u003cp\u003eThis content provides guidance on adding custom JavaScript code to Apigee and Apigee hybrid portals for enhancing functionalities like integrating third-party tools or implementing cookie consent popups.\u003c/p\u003e\n"],["\u003cp\u003eCustom scripts can be added through the portal settings under the "Custom Scripts" tab, requiring proper enclosure within \u003ccode\u003e<script>\u003c/code\u003e tags to prevent display and security issues.\u003c/p\u003e\n"],["\u003cp\u003eScripts can be executed during page load (onLoad) or when navigating away from a page (onUnload) by defining functions within \u003ccode\u003eportal.pageEventListeners\u003c/code\u003e in the global namespace, allowing for dynamic content modification and cleanup activities.\u003c/p\u003e\n"],["\u003cp\u003eAvoid manipulating the DOM with custom scripts in order to prevent overriding or changing the built-in behaviors of the portal, however it can be used to integrate third-party services.\u003c/p\u003e\n"],["\u003cp\u003eExamples are given for executing custom scripts during JavaScript events and adding a cookie consent popup by using open source solutions like the Cookie Info Script.\u003c/p\u003e\n"]]],[],null,["*This page\napplies to **Apigee** and **Apigee hybrid**.*\n\n\n*View [Apigee Edge](https://docs.apigee.com/api-platform/get-started/what-apigee-edge) documentation.*\n\n\u003cbr /\u003e\n\n| **Warning**: Custom scripts are supported for integrating third-party services such as web metrics or feedback tools. Avoid using custom scripts to manipulate the DOM to override or otherwise change built-in behaviors of the portal.\n\nTo add custom JavaScript code or HTML content before the `\u003cbody\u003e` tag on each\npage in your portal: \n\nCloud Console UI\n\n1. In the Apigee in Cloud console, go to the **Distribution \\\u003e Portals** page.\n\n [Go to Portals](https://console.cloud.google.com/apigee/portals)\n2. Click **Settings** in the navigation menu.\n\n3. In the **Custom Scripts** section, enter the custom JavaScript code in the\n text box. You can include multiple scripts.\n\n | **Warning** : Make sure to enclose your custom code in `\u003cscript\u003e` and `\u003c/script\u003e` tags. Invalid JavaScript code has the potential to impact the correct display of content or introduce security vulnerabilities across your entire site.\n\n \u003cbr /\u003e\n\n4. Click **Save**.\n\nClassic UI\n\n1. Select **Publish \\\u003e Portals** and select your portal.\n2. Click **Settings** on the landing page. Alternatively, you can select **Settings** in the drop-down in the top navigation bar.\n3. Click the **Custom Scripts** tab.\n4. In the **Custom Scripts** section, enter the custom JavaScript code in the text box. You can include multiple scripts. **Warning** : Make sure to enclose your custom code in `\u003cscript\u003e` and `\u003c/script\u003e` tags. Invalid JavaScript code has the potential to impact the correct display of content or introduce security vulnerabilities across your entire site.\n5. Click **Save**.\n\nThe following sections provide examples of custom scripts:\n\n- [Executing a custom script during and onLoad or onUnload JavaScript event](#javascript-event)\n\n- [Adding a cookie consent popup](#cookie-consent)\n\nSee also [Configuring analytics tracking](/apigee/docs/api-platform/publish/portal/api-portal-analytics).\n\nExecuting a custom script during an onLoad or onUnload JavaScript event\n\nDefine custom scripts to be executed when each page in your portal:\n\n- Loads into the DOM using the `onLoad` JavaScript event.\n- Is navigated away from using the `onUnload` JavaScript event.\n\nYour custom function must be defined as part of the `portal.pageEventListeners` in the global namespace (declared on the `window` variable).\n\nBoth 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.\n\nFor example: \n\n \u003cscript\u003e\n window.portal = {};\n window.portal.pageEventListeners = {\n onLoad: (path) =\u003e {\n if (path === '/quickstart') {\n // Change text content of first \u003cp\u003e element to something\n // else. (DOM must be loaded when onLoad is called)\n document.getElementsByTagName('p')[0].textContent =\n 'Welcome to the quick start! Be sure to send us your feedback.';\n // print a custom message to the console every second while user is on\n // quickstart page.\n const interval =\n window.setInterval(() =\u003e console.log('Hello'), 1000);\n return interval;\n }\n return undefined;\n },\n onUnload: (path, contextReturnedFromOnLoad) =\u003e {\n if (contextReturnedFromOnLoad != null) {\n // Stop printing custom message to console every second.\n window.clearInterval(contextReturnedFromOnLoad)\n\n }\n },\n };\n \u003c/script\u003e\n\nAdding a cookie consent popup\n\nCustom scripts may be used to implement a cookie consent solution. There are a number of popular open source options implemented in\nJavaScript; select one that meets your specific compliance requirements.\n\nFor example, the following script uses the [Cookie Info Script](https://cookieinfoscript.com/). \n\n \u003cscript type=\"text/javascript\" id=\"cookieinfo\" src=\"//cookieinfoscript.com/js/cookieinfo.min.js\"\u003e\n \u003c/script\u003e"]]