Code Injection
You can add your own code to the header and footer sections of your Learner site - you could for example add analytics scripts, custom tracking codes, meta tags or styles. The custom code will be loaded on all pages of your Learner site.
Where can I add my own header and footer code?
In the Administrator site click on 'Settings' in the header menu and then select 'Analytics & Tracking'.
Below the Google Analytics section you will find the HTML editor that allows you to add code to the header and footer of the Learner site.
Header Code is injected into the <head> tag. Footer Code is injected before the closing </body> tag. Both are added after other styles and scripts.
When you have finished editing your custom code, click 'Update' and your changes will be saved, and instantly applied to your learner site.
What code can I add to the header and footer?
You can add analytics scripts, custom tracking codes, meta tags or styles. For example you could add a Facebook Pixel to each page, a Google Tag, or set your own font and style to the Learner site.
In this example we can change the font of the header menu items by using CSS to import a web font (in this case 'Montserrat') and then applying it to the relevant text elements on the platform.
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
.headerText {
font-family: 'Montserrat', sans-serif;
}
.CommonTabsNavigation__item {
font-family: 'Montserrat', sans-serif;
}
</style>
You could go one step further and decide you do not want to display the header menu icons, again this is achieved using CSS.
<style>
.MainMenuDesktop__itemIcon {
display: none;
}
</style>
Important: If you do add custom code (e.g. to adjust the font or style of your Learner site) please be sure to test your Learner site thoroughly to ensure pages render correctly on all device types. Errors in code could break the functionality of the site so we recommend that you ask a web developer to make these changes for you.
Will the code run on every page?
Code that has been added to the Header and Footer will run on all pages of the Learner site. The Administrator site will not be affected.
Can I use CSS and tracking scripts at the same time using code injection?
Yes, you can use both CSS and tracking scripts in the code injection sections. We do recommend that you perform your own extensive testing to ensure there is no loss of performance when running multiple scripts and/or CSS changes to your site.
Can I use Meta/Facebook Pixel tracking on my site?
Yes, you can use the code injection feature to add the relevant Meta Pixel tracking across your learner site. As of October 2023, the recommended method to apply the Meta Pixel is to the Header section of the Code Injection Feature.
Please refer to Meta's current developer docs for instructions on how to generate your Pixel ID and how to install it to your site.
Can I use Google Tag Manager on my site?
Yes, you can use the code injection feature to add the relevant Google Tag Manager tracking across your learner site. As of October 2023, the recommended method to apply Google Tag Manager tracking code is to the Footer section of the Code Injection Feature.
Please refer to Google's developer docs for instructions on how to generate your Google Tag Manager embed code and how to install it to your site.
Can I use HubSpot tracking on my site?
Yes, you can use the code injection feature to add the relevant HubSpot tracking code across your learner site. As of October 2023, the recommended method to apply HubSpot's tracking code is to the Footer section of the Code Injection Feature.
Please refer to HubSpot's developer docs for instructions on how to generate your HubSpot embed code and how to install it to your site.