On Load Event

Fire Event on load

When to use it?

The On Load Event is particularly useful for scripts like Google Tag Manager, Google Analytics, and any other tracking scripts related to cookies, including those from Hubspot, Hotjar, and various other third-party libraries.

It watches for scripts inside the <head> or <body> tags marked with type="text/boostify".

These scripts are then activated after a short delay of a few milliseconds or in response to user interactions such as scrolling, mouse movement, touching, or after a predetermined maximum time.

💡

Indeed, you might experience a slight drop in conversion rates, ranging from 0.5% to a maximum of 2% on initial page views. However, it’s important to note that 3rd party scripts often add significant load, which can cause your main thread to become bottlenecked. Addressing this issue can ultimately enhance your site’s overall performance.

How To use it?

Just swap type="text/javascript for type="text/boostify

<script type="text/boostify" async src="https://www.googletagmanager.com/gtag/js?id=G-{{something}}"></script>
<script type="text/boostify">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-{{something}}');
</script>

Configuration options

  • maxTime: Number - (600ms by default) - Specifies the maximum wait time in milliseconds before the scripts are executed automatically. This delay allows for user interaction to potentially trigger script execution sooner.

  • eventsHandler Array - (['mousemove', 'load', 'scroll', and 'touchstart'] by default ) - A list of event types as strings. These events, when occurred, prompt Boostify to load the specified scripts.

  • callback: function - An optional callback function that executes after the scripts have been successfully loaded. This function receives an event object detailing the trigger event.

boostify.onload({    
    maxTime:1200,
    eventsHandler: ['mousemove','load','scroll','touchstart']
    callback: async () =>{
       console.log('all scripts with bootext/boostify were executed')
    }
})
💡

There is helper functions that you can use inside your callback:

Real World Examples

⚠️

Under construction