Let’s see more about how to ignore the rocket loader tracking script on Cloudflare. At Bobcares, with our Server Management Services, we can handle your Cloudflare issues.

Cloudflare – Rocket Loader-ignore tracking script

By delaying the loading of all of your JavaScript until after the production of an entire page, Rocket Loader is an optional JavaScript code processor that will optimize website loading times. Although it may seem like a good concept, many real-time JavaScript apps that need to run without delay do not support it.

The Rocket Loader is typically “disabled” in nature by Cloudflare’s WordPress plugin because it may cause troubles on websites that heavily utilize and depend on real-time JavaScript frameworks. By clicking the “Apply Recommended Cloudflare Settings for WordPress” button, the Rocket Loader will turn off. Sometimes it is necessary to remove the Rocket Loader for a specific script or the entire website if the user fails to follow the settings and leaves it in an “enable” state. This will cause some JavaScript scripts on the websites to malfunction.

How do we decide which scripts the automatic mode will ignore?

According to Cloudflare, in order to ignore rocket loader script auto mode, the script tag must be in the following state:

<script data-cfasync="false" src="/javascript.js"></script>

However, it won’t ignore the script if the type=’text/javascript’ attribute is present. In WordPress we don’t have direct access to all javascript declarations, it’s only possible to modify the script URL by using the clean_url filter. We must also remove the type attribute from the scripts. Therefore, we must identify the actions that will trigger both before and after the script’s output.

wp_print_scripts – this one fires before the scripts will print.
wp_print_head_scripts – this one fires after the scripts will print.

Now, we have to replace the type attribute on the scripts that we don’t want to use by capturing the output. This code will add the appropriate async attributes to each file. And also let us know which files to ignore if we place them in the themes function.php file:

function rocket_loader_attributes_start() {
ob_start();
}

function rocket_loader_attributes_end() {
$script_out = ob_get_clean();
$script_out = str_replace(
"type='text/javascript' src='{rocket-ignore}",
'data-cfasync="false"'." src='",
$script_out);
print $script_out;
}

function rocket_loader_attributes_mark($url) {
// Set up which scripts/strings to ignore
$ignore = array (
'script1.js'
);
//matches only the script file name
preg_match('/(.*)\?/', $url, $_url);
if (isset($_url[1]) && substr($_url[1], -3)=='.js') {
foreach($ignore as $s) {
if (strpos($_url[1], $s)!==false)
return "{rocket-ignore}$url";
}
return "$url' data-cfasync='true";
}

return "$url";

}
if (!is_admin()) {
add_filter( 'clean_url', 'rocket_loader_attributes_mark', 11, 1);
add_action( 'wp_print_scripts', 'rocket_loader_attributes_start');
add_action( 'print_head_scripts', 'rocket_loader_attributes_end');
}

Also, we can manually add the script files and strings from Rocket Loader that we want to ignore. We can do this by changing the $ignore array.

[Looking for a solution to another query? We are just a click away.]

Conclusion

In this article, we have discussed in detail ignoring rocket loader tracking script on Cloudflare.