Test Bricks Popups
This guide explains how to test different Bricks popups & trigger based on different user interactions. We’ll cover how to test between:
- Triggering a popup when the user scrolls 50% down the page.
- Triggering a popup after a 20-second delay from page load.
These variations are determined by classes added to the <body> element by AB Split Test.
Prerequisites
- JavaScript Knowledge: Some experience with adding/editing JavaScript.
- Bricks Builder: Make sure Bricks is installed and has popups enabled.
- Bricks Popup ID: You should have a Bricks popup created with a specific ID (e.g.,
3321). Different popup IDs can be tested if desired. - AB Split Test: Installed and activated. Create a new CSS Test with two or more variations.
Create a CSS Test
Code Snippet
Add this JavaScript code snippet to every frontend page. define TestID with your
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('ab-test-setup-complete', function() {
window.testId = 73795; // Your test ID
// Check if body has specific class and run corresponding function
if (document.body.classList.contains('test-css-' + testId + '-1')) {
scroll50Function();
} else if (document.body.classList.contains('test-css-' + testId + '-2')) {
wait20sFunction();
}
});
});
// Define the functions
function scroll50Function() {
// Function to trigger popup at 50% scroll
console.log('Variation: Scroll 50% to trigger popup.');
window.addEventListener('scroll', function onScroll() {
var scrollTop = window.scrollY;
var docHeight = document.documentElement.scrollHeight;
var winHeight = window.innerHeight;
var scrollPercent = scrollTop / (docHeight - winHeight);
if (scrollPercent >= 0.5) {
// Unbind the scroll event so this only happens once
window.removeEventListener('scroll', onScroll);
// Trigger the Bricks popup
bricksOpenPopup(3321); // Replace 3321 with your actual popup ID
console.log('Popup triggered at 50% scroll.');
}
});
}
function wait20sFunction() {
// Function to trigger popup after 20 seconds
console.log('Variation: Wait 20 seconds to trigger popup.');
setTimeout(function() {
// Trigger the Bricks popup
bricksOpenPopup(3321); // Replace 3321 with your actual popup ID
console.log('Popup triggered after 20 seconds.');
}, 20000); // 20000 milliseconds = 20 seconds
}
Troubleshooting
Popup Doesn’t Appear:
- Check the Popup ID: Ensure you’ve replaced
3321with the correct popup ID. - Verify Bricks Conditions: Ensure the popup isn’t restricted by conditions set within Bricks.
- Console Errors: Open the browser console to check for JavaScript errors.
Function Not Executing:
- Body Class: Confirm that the
<body>element has the correct test class that you have defined in the JavaScript. - Script Load Order: Ensure that Bricks and any necessary scripts are loaded before this script.
Scroll Percentage Not Calculating Correctly:
- Page Height Issues: If your page has dynamic content or lazy-loaded elements, the document height might change.
- Adjust Threshold: Modify the scroll percentage threshold if needed.
November 14, 2024 / /