Rule not firing on click event

[aeliayousaf]

I'm trying to create a rule where when a user clicks an icon on the page the rule fires. The icon is however within an iframe, and i cannot target the URL. 

[yuhuisg · Accepted solution]

Any user interaction within an IFRAME usually cannot be detected by the parent frame, which is where your Launch property is. And so Launch will not be able to detect those interactions/events.

If you can add code to the page in the IFRAME, consider using postMessage() in the IFRAME to send the event data up to the parent frame. Then within Launch, you can use window.addEventListener('message', callbackFunction) to handle those events as you wish.

[aeliayousaf]

I am quite new to this - is there a working example that i can follow anywhere?

[yuhuisg]

@aeliayousaf try this: https://scriptverse.academy/tutorials/html5-window-postmessage.html

[aeliayousaf]

<iframe id="myIFrame" src="about:blank" width="100%" height="1024"></iframe> where should i use postMessage()?

[yuhuisg]

I don't think the method will work if your IFRAME's src is "about:blank". Instead, if your IFRAME's src is "page.html", then you'd include the postMessage() in page.html.

[frank8899]

Can this work if there are multiple things I want to track in the iFrame? I want to capture the name of the visulaisation in the iFrame and also the button they clicked on. Can I do that with postMessage()? Also, if I do get this implemented, how do I access this in Launch? What type of rule do I need to create? Thanks.

[yuhuisg]

Yes, the postMessage() allows you to send any string from the IFRAME to the parent, so it's up to you to decide how you want to structure that string with the required values that you want. A JSON sting might be the easiest, simplest format to use.

In Launch, you can detect a postMessage() by using a "Custom Code" event. In that Custom Code, use this:

window.addEventListener('message', function(event) {
  if (event.origin === 'www.iframe-domain.com') {
    trigger();
  }
});

You can then use your postMessage()'s data in your Rule's conditions and actions like so:

%event.data% 

or

in Custom Code, event.data.