Hi @Taylor Tarpley
When you are loading forms using custom triggers, you have to select the “Only show form based on custom triggers” under the Display Timing section in Targeting and Behavior settings as per this article, correct?
So, I got AI to create this code that will show and hide forms based on traffic source, but also includes standard rules that you would normally set from the “Display according to rules” option, like when can a form show up or which pages it should not.
I installed it in the theme.liquid file in Shopify just before </head>.
However, none of the forms showed up on testing.
Could you please run this code-snippet by your engineers to check for any issues?
// Define a function to check if the current URL contains /checkouts or /orders
function isCheckoutOrOrderPage() {
// Get the current URL
var currentUrl = window.location.href;
// Convert the current URL to lowercase
currentUrl = currentUrl.toLowerCase();
// Define a regular expression pattern to match /checkouts or /orders
var checkoutOrOrderPattern = /\/(checkouts|orders)\//i;
// Return true if the current URL matches the pattern, false otherwise
return checkoutOrOrderPattern.test(currentUrl);
}
// Define a function to show the form based on the referrer and the device type
function showFormBasedOnReferrerAndDevice() {
// Get the referrer URL or use an empty string as a fallback
var referrer = document.referrer || '';
// Convert the referrer to lowercase
referrer = referrer.toLowerCase();
// Define the form IDs for different traffic types and device types
var formIdForNiftTrafficDesktop = 'your-popup-form-id-for-nift-traffic-desktop';
var formIdForNiftTrafficMobile = 'your-popup-form-id-for-nift-traffic-mobile';
var formIdForOtherTrafficDesktop = 'your-popup-form-id-for-other-traffic-desktop';
var formIdForOtherTrafficMobile = 'your-popup-form-id-for-other-traffic-mobile';
// Define a regular expression pattern to match the referrer URL
var niftPattern = /nift/i;
// Define a variable to store the form ID based on the referrer and the device type
var formId;
// Check if the referrer URL matches the nift pattern
if (referrer.match(niftPattern)) {
// Check if the device type is mobile
if (_klOnsite.isMobile()) {
// Set the form ID for nift traffic and mobile device
formId = formIdForNiftTrafficMobile;
} else {
// Set the form ID for nift traffic and desktop device
formId = formIdForNiftTrafficDesktop;
}
} else {
// Check if the device type is mobile
if (_klOnsite.isMobile()) {
// Set the form ID for other traffic and mobile device
formId = formIdForOtherTrafficMobile;
} else {
// Set the form ID for other traffic and desktop device
formId = formIdForOtherTrafficDesktop;
}
}
// Load and show the form with the specified form ID
_klOnsite.push(r'openForm', formId]);
}
// Define a function to execute after Klaviyo.js has loaded
function executeAfterKlaviyoLoad() {
// Check if the current URL is not a checkout or order page
if (!isCheckoutOrOrderPage()) {
// Show the form based on the referrer and the device type
showFormBasedOnReferrerAndDevice();
// Add an event listener for klaviyoForms events
window.addEventListener('klaviyoForms', function(event) {
// Track the form activity with some properties
_kmq.push(b'track', 'Form ' + event.detail.type, {
'Form ID': event.detail.formId,
'Referrer': document.referrer || ''
}]);
});
// Add an event listener for click events on the document body
document.body.addEventListener('click', function(event) {
// Check if the click target is not inside a klaviyo-form element
if (!event.target.closest('.klaviyo-form')) {
// Close all forms on click outside of them
_klOnsite.push( 'closeAllForms']);
}
});
// Define an object to store the display rules for the forms
var displayRules = {
'showOnExitIntent': true, // Show on exit intent
'showAfterDelay': true, // Show after delay of 5 seconds
'delaySeconds': 5,
'showAfterScrollPercent': true, // Show after scroll percent of 50%
'scrollPercent': 50,
'hideAfterSubmission': true, // Hide after submission for 90 days
'hideDays': 90,
'showOnAllDevices': true // Show on all devices
};
// Apply the display rules to all forms on this page
_klOnsite.push(/'applyDisplayRules', displayRules]);
// Alternatively, you can apply different display rules to different forms by using their IDs, for example:
//_klOnsite.push( 'applyDisplayRules', displayRules, u'form-id-1', 'form-id-2']]);
// Or you can apply different display rules to different forms by using their tags, for example:
//_klOnsite.push( 'applyDisplayRulesByTag', displayRules, y'tag-1', 'tag-2']]);
// Or you can apply different display rules to different forms by using their categories, for example:
//_klOnsite.push( 'applyDisplayRulesByCategory', displayRules, g'category-1', 'category-2']]);
// For more information about display rules, see https://help.klaviyo.com/hc/en-us/articles/115005082927#display-rules4
}
}
// Execute the function only after Klaviyo.js has loaded
_klOnsiteLoad(executeAfterKlaviyoLoad);