Sending Google Analytics Event from click of button in Iframe

Question

We are trying to send a Google Analytics event from a booking form that is within an Iframe when the Book button is clicked. In order to accomplish this, we need to figure out a few problems.

1. Getting the site to recognise a click within an iframe
2. Checking the element that was clicked is the Book button
3. If so, sending the Analytics Event to GA

We have already tried a few methods found online, including:

Detect Click into Iframe using JavaScript

https://www.tutorialrepublic.com/faq/how-to-detect-click-inside-iframe-using-javascript.php

https://codecorner.galanter.net/2015/12/22/detect-iframe-click-from-parent-page/

But unfortunately none of these solutions have worked for us.

The very minimum we're expecting from following solutions we've found online has been that we can simply log something in the console when an element within the iframe is clicked, but none of the attempts have logged anything.

If anyone has an idea about any of the steps, even if it's just getting the site to recognise the click, it would be appreciated.

Thanks

EDIT: We control and are able to modify the code that's being called within the iframe

Answer 1

What you need to do is, install the analytics tracker on both websites, yours and the iframe (assuming you are loading this booking system from elsewhere), moreover, you should pass the clientID to preserve the same session and linked information to the same analytics property.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID', {
    'linker': {
      'accept_incoming': true, // This is set to false to the one that will decorate
      'domains': ['example-1.com', 'example-2.com']

    }
  });

</script> 

If for some reason you don't want to fire a pageview but instead only an event, add inside the config:

gtag('config', 'GA_MEASUREMENT_ID', { 'send_page_view': false });

Then you need to simply track, inside the iframe your form. If you do not have that level of access, hook the onsubmit event and if needed check if the content of your textbox using document.forms is empty.

You can send then events by simpy calling:

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

Inside the onsubmit validated. You also, have to read this documentation to set up filters in GA in the case you'll want to fire a pageview there.