Pokud na vašem webu používáte kontaktní formulář, patrně používáte (nebo začnete brzy shánět) i nějakou ochranu proti spamu. Kvalitní a neobtěžující nabízí i přímo Google – reCAPTCHA v3. Snadnou integraci pak nabízí například oblíbený plugin na tvorbu formulářů Contact Form 7. Pro uživatele populární šablony a builderu Divi nabízí reCAPTCHu v3 i vestavěný formulářový modul.
Založení Google reCAPTCHA
Pro integraci ochrany potřebujete SITE KEY a SECRET KEY. Tyto klíče získáte po registraci vašich stránek do služby Google reCAPTCHA. Na to potřebujete mít Google účet. V Admin console pak kliknete vpravo nahoře na ikonu + (create).
Poté vyplníte formulář, kde mimo jiné zadáte všechny domény na kterých má reCAPTCHA fungovat.
Služba vám vygeneruje zmiňované klíče. Ty si můžete také kdykoliv pro danou doménu zobrazit kliknutím na ikonu ozubeného koloa (Settings) a poté na reCAPTCHA keys.
Po správné integraci byste na stránkách měli vidět známý badge.
Pozor, zde se to může lišit dle použitého pluginu. Zatímco při použití Contact Form 7 se vám badge zobrazí na každé stránce, u DIVI je to jen na stránkách, které obsahují formulář. Badge také můžete skrýt. Musíte ovšem u formuláře jinak viditelně uživatele upozornit, že je tato služba využívána (viz. předchozí odkaz).
Google reCAPTCHA a Pagespeed insights
Pokud řešíte rychlost načítání vašich stránek a používáte na kontrolu Pagespeed Insights zjistíte že vaše skóre se po implementaci Google reCAPTCHA celkem propadlo. Navíc skript k reCAPTCHA se načítá na každé vaší stránce a ne jen na stránce s formulářem. Dle mého testování jsem zjistil že skóre pro mobilní zařízení se propadlo cca o 20 bodů a pro počítač cca o 10 bodů. Dobrá zpráva je, že zpomalení jako uživatel nepostřehnete. Dle měření jsem občas rozdíl zaznamenal u metriky Largest Contentful Paint a to v řádu malých desetinek sekundy. Problém propadu skóre viz obrázek níže.
V dokumentaci se dočtete, že aby reCAPTCHA co nejpřesněji vyhodnotila, zda je chování na stránkách závadné či ne, měla by se načítat všude. Nicméně já mám zatím vyzkoušeno, že stačí načítat na stránku, kde se reCAPTCHA využívá. Navíc se tak zbavíte toho, že se vám badge načítá na všech stránkách (pokud ho tedy neskrýváte viz. výše).
Když jsem přemýšlel jak tento problém řešit, narazil jsem na tento návod, který zafungoval perfektně pro CF7. Do functions.php své aktivní child šablony stačí vepsat následující kód.
add_action('wp_print_scripts', function () {
global $post;
if (is_a($post, 'WP_Post') && !has_shortcode($post->post_content, 'contact-form-7')) {
wp_dequeue_script('google-recaptcha');
wp_dequeue_script('wpcf7-recaptcha');
}
});Kód prochází každou vaší stránku a pokud neobsahuje shortcode pro CF7 odebere reCAPTCHA skripty.
Bohužel pro formuláře Divi jsem štěstí neměl. Dle tohoto návodu, který řeší něco podobného jsem sice dokázal na požadovaných stránkách v Divi odstranit načítání skriptu, ale formuláře po nějakém čase při pokusu o odeslání začaly selhávat. Můj kód pro Divi níže.
add_action( 'template_redirect', function(){
global $post;
if($post->ID != id_stranky_s_formularem && $post->ID != id_stranky_s_formularem2){
remove_action( 'wp_enqueue_scripts', array( ET_Core_API_Spam_Providers::instance()->get( 'recaptcha', '' ), 'action_wp_enqueue_scripts' ) );
}
});Pokud byste někdo pro Divi našel funkční řešení, dejte vědět, rád na to mrknu.