Warning: This task requires knowledge of javascript and website development, please forward this article to the right person who can help set up tracking using this guidance.

Tracking conversions on Google, Facebook, and for other mediums can be difficult when you're using an iframe to load your XILO customer form. Although the experience of loading the form on its unique XILO url is probably better for your customers, redirecting to a different domain (xilo.io) can present problems when trying to track conversions that kick back to your ads.

In this article, I'm going to show you how you can easily capture events firing from the XILO forms and how to leverage a little bit of code that you place on your website to consume those events or to redirect to a landing page that tracks conversions.

First, you need to add an event listener to the page embedding your XILO form

There's a long article about the postMessage and message event that we can use to pass data securely from the iframe'd XILO forms and your website. You can review that here. But for the sake of implementing this quickly, I've pasted a re-usable javascript snipper that you will want to add in between a <script></script> element to listen for XILO form events from the iframe.

    window.addEventListener("message", (event) => {
      console.log(event.data);
      if (event.data === 'Visited XILO') {
  	console.log('Visited XILO Fired');
      }
      if (event.data === 'Started Form') {
  	console.log('Started Form Fired');
      }
      if (event.data === 'New Lead') {
  	console.log('New Lead Fired');
      }
      if (event.data === 'Finished Form') {
        setTimeout(() => {
          console.log('Finished Form Fired and delayed 2 seconds');
        }, 2000);
      }
    }, false);

This snippet listens for a message event from the iframe and then looks to see if the name of the event matches an event name XILO is posting to your website.

Second, add a redirect function after a slight time delay to the Finished Form event to redirect to your own landing page

Because we're using an iframe to load XILO, it's not easy for us to redirect your prospects to a landing page and have conversions actually fire. Google has made it challenging to track cookies across different domains, which is why we're setting up your website to do the redirect when an event is fired that tells your website the form is completed.

    window.addEventListener("message", (event) => {
      console.log(event.data);
      if (event.data === 'Visited XILO') {
  	console.log('Visited XILO Fired');
      }
      if (event.data === 'Started Form') {
  	console.log('Started Form Fired');
      }
      if (event.data === 'New Lead') {
  	console.log('New Lead Fired');
      }
      if (event.data === 'Finished Form') {
        setTimeout(() => {
          console.log('Finished Form Fired and delayed 2 seconds');
          // ADD THIS LINE HERE BELOW
          window.open("https://xilo.io/success-page", "_self");
        }, 2000);
      }
    }, false)

Third, test your form to make sure events are firing and your redirect is working

Once you've completed the steps above, go to the url thats hosting the XILO forms iframe and run through the form. Right click the screen, select "Inspect", and review the "Console" so you can confirm events are firing. Lastly, make sure the form redirects and the URL changes to the landing page on submit.

This task can be highly technical. We recommend having a webmaster or developer implement this code on to your website as it can be frustrating to get it all to work properly if the snippets are not added to the correct places. Please reach out to a XILO support rep if you have any questions or need any assistance.