Examples
CSS injection
If you need to inject some inline CSS classes on all pages, you can choose the global way, then enable the option and insert your code at the End of the HEAD section
, so this code will override all your CSS assets coming from your existing modules or template set.
.header { background-color: #e9e9e9; padding: 10px; }
If you only need to insert some CSS on a single page, then you will need to do it on the page node instead of the site node.
JavaScript injection
For many reasons, you may want to inject some JavaScript into a page. This can be done at many places, on the HEAD or on the BODY part.
For instance, if you want to integrate a Google Tag Manager, you will need to add code on two different parts. The first part should be added as high in the of the page as possible, so you will choose the Top of the HEAD section
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-123456');</script> <!-- End Google Tag Manager -->
And Additionally, you will need to paste some code immediately after the opening tag, so you will choose the Top of the BODY section
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-123456" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->