How to use form events in your page

We provide a script that triggers events when a user interacts with the form for the first time and when the form is submitted. To integrate this with your site, simply add the following code to your parent page:

window.addEventListener('message', (event) => {
   // Check if the event's origin contains the desired subdomain
   const requiredSubdomain = 'pages.loopify.com';
   if (!event.origin.includes(requiredSubdomain)) return; // Validate origin
   switch (event.data.event) {
     case 'first_interaction':
       console.log('User interacted with the form.');
       // Example: Push to GA
       // gtag('event', 'contact_start', { topic: 'newsletter' });
       break;
     case 'form_submitted':
       console.log('Form was submitted.');
       // Example: Push to GA
       // gtag('event', 'contact_complete', { topic: 'newsletter' });
       break;
}
});

Instead of 'pages.loopify.com', you can use your own rendering domain under const requiredSubdomain.

Note: when you do your part by adding the script, get in touch with us at support@loopify.com so we could also add the script on the template you are using. Both scripts need to be added for this to work.

Тhis solution allows you to listen to our events and act on them however you want. For example, you can use these events to push data to Google Analytics. Below is an example of how you might do this using either gtag or the dataLayer.

Example with gtag:

case 'first_interaction':
   gtag('event', 'contact_start', { topic: 'newsletter' });
   break;
case 'form_submitted':
   gtag('event', 'contact_complete', { topic: 'newsletter' });
   break;

Example with dataLayer:

case 'first_interaction':
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: 'contact_start',
        topic: 'newsletter'
    });
    break;
case 'form_submitted':
    window.dataLayer.push({
        event: 'contact_complete',
        topic: 'newsletter'
    });
    break;

By handling the events in the parent page, you maintain control over your tracking and ensure data consistency in your analytics setup.