Script Injection Feature

what is this feature? this feature allows you to load scripts (e g , for ad servers or other custom integrations) in the head of your website without using the purple plugin system these scripts load quickly when users visit your pages and work correctly with the website's architecture it is your responsibility to properly trigger their execution, and you must make sure they comply with consent requirements the script injection feature is available from pxp 5 0 0 please refer to software version docid\ qhdig0sllx yducsm0 ds for further info on what version is avalable at which domain why do we need this? fast loading critical scripts load immediately when users visit the page reliable scripts always work correctly regardless of how the page is loaded flexible you can add different types of scripts to different parts of the page easy management all scripts are managed through configuration how to use it? you can add scripts to your website by updating the experience config json there are two places where you can add scripts adding scripts to page header scripts added here load first and are best for critical functionality { "purple" { "scripts" { "head" \[ { "src" "https //example com/important script js" } ] } } } adding scripts to page body scripts added here load after the main content { "purple" { "scripts" { "body" \[ { "src" "https //example com/analytics script js" } ] } } } each script object can contain any html script attributes the structure under head and body contains objects where each property becomes an attribute of the \<script> tag i e { "purple" { "scripts" { "head" \[ { "src" "https //example com/script js", "async" "", "defer" null, "type" "text/javascript", "data custom" "my value" } ] } } } multiple scripts you can add multiple scripts at once { "purple" { "scripts" { "body" \[ { "src" "https //script1 com" }, { "src" "https //script2 com" }, { "src" "https //script3 com" } ] } } } using local script files you can also load scripts from the project dynamic resources using the resource //dynamic/ prefix { "purple" { "scripts" { "head" \[ { "src" "resource //dynamic/storefront/assets/my script js" } ] } } } best practices when to use header vs body use header for critical scripts that need to load first (consent management, essential tracking) use body for non critical scripts (analytics, social media widgets) script loading tips add one script at a time and test it check browser console for any error messages test on different devices and browsers this feature was made for the use in websites, for instance there might be side effects in apps, so if you want to use this on a project that includes websites and apps, make sure to test the behavior early on to ensure proper behavior