reCAPTCHA v2 Integration - SpamBlock Pixel

Learn how to integrate SpamBlock Pixel with Google reCAPTCHA v2 for comprehensive spam protection. Combine behavioral detection with CAPTCHA verification.

This guide shows how to combine SpamBlock Pixel with Google reCAPTCHA v2 for multi-layer spam protection. This approach combines behavioral detection (SpamBlock) with Google's CAPTCHA verification.

Note: You can use any backend endpoint. The SpamBlock Forms endpoint (https://api.spamblock.io/f/{form_id}) is shown as an example of our hosted form solution. Learn more about Forms or use your own backend endpoint.

HTML/JavaScript Example

Here's a basic example using vanilla HTML and JavaScript with Axios:

<!-- Load SpamBlock Pixel -->
<script src="https://pixel.spamblock.io/latest.js" defer></script>

<!-- Load reCAPTCHA v2 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- Load Axios from CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<form id="contact-form" action="#" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />

  <label for="email">Email Address</label>
  <input id="email" name="email" type="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- reCAPTCHA v2 widget -->
  <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>

  <button type="submit">Send</button>
</form>

<script>
  window.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("contact-form");
    
    // Listen for allowed submissions from SpamBlock
    form.addEventListener("spamblock:allowed", async function(event) {
      event.preventDefault();

      // Get reCAPTCHA response
      const recaptchaResponse = grecaptcha.getResponse();
      if (!recaptchaResponse) {
        alert("Please complete the reCAPTCHA verification.");
        return;
      }

      const formData = new FormData(event.target);
      formData.append("g-recaptcha-response", recaptchaResponse);

      try {
        const response = await axios.post(
          "https://api.spamblock.io/f/{form_id}",
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        );

        if (response.status === 200) {
          alert("Submission successful!");
          form.reset();
          // Reset reCAPTCHA
          grecaptcha.reset();
        } else {
          alert("There was an error submitting the form.");
          grecaptcha.reset();
        }
      } catch (error) {
        if (error.response) {
          console.error("Error:", error.response.status, error.response.data);
          alert("There was an error submitting the form.");
        } else if (error.request) {
          console.error("Network error:", error.request);
          alert("Network error. Please try again.");
        } else {
          console.error("Error:", error.message);
          alert("An unexpected error occurred.");
        }
        grecaptcha.reset();
      }
    });
  });
</script>

Using Fetch API

You can also use the native Fetch API instead of Axios:

const response = await fetch("https://api.spamblock.io/f/{form_id}", {
  method: "POST",
  body: formData
});

if (response.ok) {
  alert("Submission successful!");
  form.reset();
  grecaptcha.reset();
} else {
  alert("There was an error submitting the form.");
  grecaptcha.reset();
}

Framework Integration

The same pattern works in frameworks. Reference these examples for framework-specific implementations:

The key is to:

  1. Load the reCAPTCHA script
  2. Include the reCAPTCHA widget in your form
  3. Listen for the spamblock:allowed event
  4. Get the reCAPTCHA response with grecaptcha.getResponse()
  5. Include the response in your form submission
  6. Reset reCAPTCHA after submission

How It Works

The spam handling flow with both services:

  1. User submits form
  2. SpamBlock Pixel intercepts submission and scores it
  3. If spam: submission blocked by SpamBlock, spamblock:allowed event not fired
  4. If allowed: spamblock:allowed event fired
  5. reCAPTCHA response is retrieved
  6. If reCAPTCHA not completed: user is prompted, submission paused
  7. Submission sent to backend with both SpamBlock validation and reCAPTCHA token
  8. Backend verifies both before processing

When to Use It

Use this approach when:

  • You want multiple layers of spam protection
  • You're already using reCAPTCHA v2 in your project
  • You need defense-in-depth against bots
  • You want to combine different detection methods
  • You require explicit user verification

Important Notes

  • Replace API key: Replace YOUR_RECAPTCHA_SITE_KEY with your actual reCAPTCHA site key
  • Backend verification: Always verify the reCAPTCHA token on your backend
  • Reset reCAPTCHA: Reset reCAPTCHA after submission (success or failure)
  • Performance: Running both SpamBlock and reCAPTCHA may be redundant; consider if both are needed
  • User experience: reCAPTCHA requires user interaction, which adds friction

Common Mistakes

  1. Not waiting for pixel - Make sure the pixel script loads before form submission
  2. Ignoring events - Listen for spamblock:allowed event to know when submission is safe
  3. Missing reCAPTCHA key - Replace YOUR_RECAPTCHA_SITE_KEY with your actual reCAPTCHA site key
  4. Not checking reCAPTCHA response - Always verify grecaptcha.getResponse() before submitting
  5. Forgetting to reset reCAPTCHA - Reset reCAPTCHA after submission (success or failure)
  6. Skipping backend verification - Always verify the reCAPTCHA token on your backend
  7. User experience - Running both SpamBlock and reCAPTCHA may be redundant; consider if both are needed

Learn More