LWR Sites for Experience Cloud
jNewer Version Available
Integrate Third-Party Libraries Using the Privileged Script Tag
An LWR site encapsulates all of its elements in shadow DOM, which prevents global
interaction with any component on the page. As a result, third-party JavaScript libraries, such
as Google Analytics and Google Tag Manager, often can’t interact with page components as needed.
But with the <x-oasis-script> privileged script tag,
you can allow these third-party libraries to bypass shadow DOM in your LWR site.
Use the custom <x-oasis-script> tag in place of the standard <script> in the head markup or inline. Scripts loaded within this custom tag run inside a special iframe that’s exempt from shadow DOM and are always executed asynchronously.
<x-oasis-script> uses the same syntax as the <script> tag.
1<x-oasis-script src="third_party_library.js"></x-oasis-script>You can also use the tag to add event listeners and to import and export global variables with the imported-global-names and exported-global-names attributes.
For example, this code sample defines a global variable—testVar—on the outer window, which is then
imported for use in the x-oasis-script window. The
global variable must be imported to define it in the privileged
scope.
1<script>
2 window.testVar = "myTestVar";
3</script>
4
5<x-oasis-script imported-global-names="testVar">
6 // Custom code to access testVar
7 console.log(window.testVar)
8</x-oasis.script>In turn, this example exports the testVar global
variable from x-oasis-script.
1<x-oasis-script exported-global-names="testVar">
2 window.testVar = "myTestVar";
3</x-oasis.script>
4
5<script>
6 // setTimeout is needed in case this script tag is run before oasis script
7 setTimeout(function(){
8 // Custom code to access testVar
9 console.log(window.testVar)
10 }, 5000);
11</script>