Google reCAPTCHA is a convenient alternative to traditional CAPTCHA for verifying visitors. Here's how to set it up:
1. Visit https://developers.google.com/recaptcha and register to obtain:
2. Enter these values in Rotation > Settings > Social, and enable “Use Captcha on Comments?”
reCAPTCHA works by adding Google's JavaScript code to your form to verify the user is not a bot, storing the verification result in a hidden field. Here's an example for a comments page. Add this code to the HTML head section:
<head>
<title> <!--GALLERY_SLUG--> with reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js?render=<!--TUBE_RECAPTCHA_SITE_KEY-->"></script>
<script>
function CheckRecaptcha() {
grecaptcha.ready(function() {
grecaptcha.execute('<!--TUBE_RECAPTCHA_SITE_KEY-->', {action: 'report_form'}).then(function(token) {
document.add_comment.recaptcha.value = token;
document.add_comment.submit();
});
});
}
</script>
Note that <!–TUBE_RECAPTCHA_SITE_KEY–> is your reCAPTCHA V3 Site Key (not the secret key).
Here's the comment form itself:
<? if ('<!--ERROR-->' != 'OK') echo "error: <!--ERROR-->"; ?>
<FORM name="add_comment" method="POST">
<input type="hidden" name="action" value="add_comment">
<input type="hidden" name="recaptcha" id="recaptcha" value=""> Google will write the answer here
<label>Name:</label> <input class="s_input" type="text" name='username' id='username' value="<?=$user['username']?>">
<br>
<textarea class="s_text" class="ph2" name='comment' id='comment' rows=5 cols=35 value="Leave Your Comments Here"></textarea>
<input type=button value='Send comment' onClick=CheckRecaptcha()> Note: this is a button, not a submit button. The form only submits after Google approves the user.
</form>
reCAPTCHA can also be used to monitor traffic quality. Google analyzes traffic and reports the percentage it considers legitimate (non-bot).
Add the following code to your site (typically on index and category pages):
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=<!--TUBE_RECAPTCHA_SITE_KEY-->"></script>
<script>
req_flag = false;
recaptcha_code = '';
if ('<!--RECAPTCHA_MAX_RATE-->') {
if (Math.random() > '<!--RECAPTCHA_MAX_RATE-->') req_flag = true;
}
grecaptcha.ready(function() {
grecaptcha.execute('<!--TUBE_RECAPTCHA_SITE_KEY-->', {action: 'index_page'}).then(function(token) {
recaptcha_code = token;
});
});
$(document).ready(function(){
$('.gallery_link').each(function() {
$(this).click(function(){
if (req_flag || recaptcha_code === '') return;
req_flag = true;
$.post('/',
{
'action': 'check_recaptcha',
'recaptcha_code': recaptcha_code,
},
function (data) {
}
);
});
});
});
</script>
Add class='gallery_link' to links to galleries or categories as in the example below
<thumb num=1-10> <a class='gallery_link' href='/gallery/<!--GALLERY_SLUG-->/index.html'> <!--GALLERY_ID--> </a> <br> </thumb>
You can replace gallery_link with any class name. The key is to attach a bot detection event to your links using JavaScript: $('.gallery_link').each(function() { … }).
4. In the admin panel, go to Settings > Layouts and enable the Google reCAPTCHA column.
Now you can view the percentage of legitimate traffic in Trade > reCAPTCHA column.
Note: Google allows only 1300 free checks per hour, so not all hits are analyzed—they're sampled based on RECAPTCHA_MAX_RATE. If you need unlimited checks, contact support about paid options.