DynamicBlockConfig

The domain to connect to your Baqend app.

The name of your Baqend app.

Enables change detection on assets (scripts & styles). If a change was detected e.g. because a script was missing in the cached version, a refresh job is triggered for that particular page. This can also be fine-tuned (e.g. excluding certain URLs) by using a AssetChangeDetectionConfig.

Define blocks within your document which contain dynamic content.

Use this attribute to define areas within your HTML document which have dynamic content, i.e. content which should be fetched from your server instead of being bypassed and cached by Speed Kit. Use this approach to display heavily-changing or customer-specific information.

Each block is identified by a CSS Selector which defaults to ".speed-kit-dynamic". You can also specify an attribute to use as an identifier and a merge function that updates the HTML when content has been loaded from your server. To learn more, see the DynamicBlock section.

As an example for a shop system you could specify your blocks as in the following listing:

var dynamicBlockConfig = {
  blocks: [{
    // Define a shopping cart area within your shop
    selector: '.shopping-cart',
    idAttribute: 'id',
    mergeFunction: (oldEl, newEl) => oldEl.outerHTML = newEl.outerHTML
  }, {
    // Define a teaser area which displays products specific to the customer
    selector: '.magic-teaser',
    idFunction: (el) => $(el).data('dynamic-id'),
    mergeFunction: (oldEl, newEl) => oldEl.outerHTML = newEl.outerHTML
  }]
};
Copy

The default HTML tag attribute to get a unique block ID from.

Sampling rate for the change detection of hot resources.

Patterns for URLs that should be cleaned when dynamicScriptExecution is enabled. When dynamicScriptExecution is enabled, only URLs matching these patterns plus safe scripts will be cleaned. When dynamicScriptExecution is disabled, all URLs are cleaned by default.

Sets a custom client error handler in case the dynamic block response indicates a client side error (status 4xx). The defaultClientErrorHandler will replace the current page with the content of the error response.

Sets a custom CORS redirect handler in case the dynamic block response is a CORS redirect. The defaultCorsRedirectHandler will reload the page and deactivate SpeedKit.

Customizes the class name that will be set to the html element when the page produces a client error.

Customizes the error banner which will be displayed, if the dynamic fetcher cannot load the response from the origin. This can either be a custom message, which will be displayed in the standard error banner or a callback, in which a fully customized banner can be implemented.

The default function to merge downloaded blocks of dynamic content into the DOM.

Customizes the class name that will be set to the html element when the page is offline.

Customizes the class name that will be set to the html element when the remote server is offline.

The default HTML tag attribute to get a unique block ID from.

With this property the Dynamic Fetcher receives the HTML attribute's name to get the unique block ID of a dynamic block's HTML element.

Each dynamic block needs a unique ID in order to be replaced with the right content. This tag attribute is where the Dynamic Fetcher can find this ID. You can use a data attribute or just element IDs for example.

If a dynamic block has no such attribute and you cannot add them, you can instead use a function to generate a unique ID from the dynamic block as an input value. See therefore the defaultIdFunction property.

Note: This property is overriden by the defaultIdFunction property.

To define different ID attributes for different blocks, use the DynamicBlockConfig.blocks property (see also: DynamicBlock.idAttribute).

The default function to get a unique ID from a dynamic block.

Each dynamic block needs a unique ID in order to be replaced with the right content. This function should return a unique ID which the Dynamic Fetcher can use. The function receives the HTML element as parameter and returns a string.

If no defaultIdFunction is given, Speed Kit will use the defaultIdAttribute.

Note: This property overrides the defaultIdAttribute property.

To define a different ID function for a different block, use the DynamicBlockConfig.blocks property (see also: DynamicBlock.idFunction).

The default function to merge downloaded blocks of dynamic content into the DOM.

Defines a custom function to merge a dynamic block loaded from the origin into its cached counterpart. The default merge function simply swaps the local with the remote block.

To define different merge functions for different blocks, use the DynamicBlockConfig.blocks property (see also: DynamicBlock.mergeFunction).

The default CSS Selector to identify dynamic blocks.

You can use any valid CSS Selector. The default is ".speed-kit-dynamic", i.e. every HTML element which has a speed-kit-dynamic class.

To define different selectors for different blocks, use the DynamicBlockConfig.blocks property (see also: DynamicBlock.selector).

Whether we already handle deferred scripts in our script queue in the deployed Document Handler.

Note: This is automatically set by the capable DocumentHandler version, manual use is not recommended.

Releases the DOMContentLoaded event in combination with usage of delay script.

To ensure the DOMContentLoaded event is fired after the execution of the Dynamic Fetcher. An empty JavaScript file named "speed-kit-dom-ready.js" should be placed on your server and included at the bottom of your HTML's body afterwards.

 <script src="/speed-kit-dom-ready.js"></script>
Copy

Speed Kit recognizes this specific script and delays it until the Dynamic Fetcher finished executing. Since it is part of the DOM the DOMContentLoaded event is fired after the script is loaded.

Option to release delay script to set execution time of Dynamic Fetcher. If true, the Dynamic Fetcher will release the delay script and will replace the dynamic blocks on ready state interactive (which is before DOMContentLoaded). If false, the Dynamic Fetcher will not release the delay script and replace the dynamic blocks on DOMContentLoaded. In case you have the delay script included, you need to make sure to release the delay script manually by sending a POST request to /speed-kit-dom-ready.js.

The function can be used to detect the device in the given document. If this function is specified, the device-mismatch-detection is automatically activated.

In case a device was found, the function should return the device as a string. This device is then used for detecting a device-mismatch with the origin (e.g. expected is "desktop" and actual is "mobile"). If a mismatch was found, the dynamic fetcher updates the custom device in the service-worker and tracks the mismatch by sending a beacon.

The function can be used to detect device mismatches.

In case a device mismatch was found, the function should return a string that describes the mismatch scenario in the from "actual-expected" (e.g. desktop-mobile). This is then tracked by the Dynamic Fetcher. If no mismatch was found, the function should return null.

Prevents dynamic fetcher from tracking information.

This option will take effect if the Dynamic Fetcher response from the origin returns an unsuccessful status code (i.e. >= 400). If true, the Dynamic Fetcher will exchange the current site with the content of the unsuccessful response or display an error banner. If false, the unsuccessful response is ignored by the Dynamic Fetcher and no Dynamic Blocks are exchanged.

Defines the number of times the Dynamic Fetcher will try the dynamic block request if the received response is invalid or an error is received.

Enables dynamic handling of differences in scripts between cached version and origin. Initially this will include executing external scripts that are only present in the origin document.

Enables special handling for Cookiebot.

List of detected external assets.

Handles scrolling when AnchorTags are present.

Revalidates the origin response when receiving a 404 or 410 status from origin.

Sets a custom offline handler in case the dynamic block response indicates the user is offline. The default case will display an error banner, which can also be customized via the DynamicBlockConfig.customErrorBanner option.

Sets a custom function to manipulate the remote document before the dynamic blocks are merged into the local document. By that it is possible to change the content of the dynamic blocks (e.g removing lazy loading). The custom function requires the remote document as parameter and returns the manipulated document.

Specifies RenderedBlocks for sections we should not exchange during our merge.

Sets a custom redirect handler in case the dynamic block response was redirected. The defaultRedirectHandler will execute a validity check, to ensure the response fits the current site and otherwise reloads the page from the origin server.

The time until an additional request will be started in milliseconds.

Function to transform dynamic block request sent to origin.

Defines a custom function that is applied to the origin request used to fetch the personalized page which is used to switch out the Dynamic Blocks.

The function takes care of checking the validity of a Dynamic Fetcher response.

In case of an invalid response the dynamic fetcher will retry the request for a set number of times, which can be defined via the DynamicBlockConfig.dynamicFetcherRetryLimit option.

Enables Speed Kit Real User Monitoring (RUM) from the Dynamic Fetcher.

Note: If activated, this option will store user and session IDs.

You can also use TrackingOptions to specify how RUM tracking should behave.

Enables the Dynamic Fetcher regardless the status of the Service Worker.

Option to execute the Dynamic Fetcher on first load or not. If false, the Dynamic Fetcher will only be executed when the Service Worker is active. If true, the Dynamic Fetcher will be executed on first load.

A CSS Selector or a custom function to identify inline JavaScripts which are considered safe to stay inside the rewritten HTML file. During the script evaluation process these will not be executed again since they are already interpreted by the browser.

Sets a custom server error handler in case the dynamic block response indicates a server error (status 5xx). The defaultServerErrorHandler will replace the current page with the content of the error response and deactivate Speed Kit.

The prefix of the status HTML classes, which will be attached to the HTML tag.

For example, you can use these classes to hide Dynamic Blocks before their content has been replaced.

The classes that will be attached to the HTML element are:

• < statusClass >-loading will be appended before the Dynamic Blocks are replaced for the actual content.
• < statusClass >-loaded will be appended after the Dynamic Blocks have been replaced.

The default HTML tag attribute to get a unique block ID from.