IMPLEMENTING ASYNC TO DELAY THE LOADING REQUIREMENT OF THE GOOGLE RECAPTCHA V3 PLUGIN - Aug 6th, 2022


In August 2022, user JeffC was having a bit of an issue implementing async with the Google Recaptcha V3 plugin, which
was slowing down the loading of his web pages when not deferred.

According to Daniel Louwe, Technical Lead at Interactive Tools,
It appears that the script provided in Google's docs is slightly inaccurate - at least for our usage here - so I've made
a small change and it appears to be working with async. For anyone else reading, here is the final updated script:

<script async src="https://www.google.com/recaptcha/api.js?render=<?php echo
urlencode(recaptcha_settings('site_key')); ?>"></script>

<script>

if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha.execute === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}

grecaptcha.ready(function(){

grecaptcha.execute('<?php echo urlencode(recaptcha_settings('site_key')); ?>', {action: <?php echo
json_encode(recaptcha_settings('page')); ?>}).then(function(token) {

document.getElementById("g-recaptcha-response").value = token;

});

});

</script>



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service