Expand my Community achievements bar.

SOLVED

iFrame Page Tracking Issue

Avatar

Level 2

I have "a-page" within this page I have a "b-page" frame. I can track the a-page without any issue. If I place the Adobe Launch tracking code on the iFrame "b-page" then on the page load 1st call triggered for "a-page" then 2nd call triggered for "b-page". When I interact with "b-page" links or form submission which is under the frame those activities are being associated with "a-page" because on browser it's showing the "a-page".

If I have a multiple iframe on the page then the page load analytics calls are increasing.

Please suggest me the best practices of iFrame tracking using Adobe Launch.

Thanks!

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

Sounds like you control both a-page and b-page.

Personally, I would not have Launch in b-page at all. Instead, anything that needs to be tracked should use window.postMessage() to send messages to a-page. Then, configure Launch in a-page to listen for those messages, then track accordingly.

I had a similar setup where b-page showed a video and I wanted to track those video interactions. So with every video interaction, I used window.postMessage() to send information about that interaction to my a-page. In a-page, I had a window.addEventListener('message', ...) that would listen for those messages, then send a Custom Event for each message. I then configured a rule in Launch for those Custom Events and tracked to AA accordingly. So effectively, I was tracking every video interaction in b-page to AA in a-page.

View solution in original post

5 Replies

Avatar

Correct answer by
Level 2

Sounds like you control both a-page and b-page.

Personally, I would not have Launch in b-page at all. Instead, anything that needs to be tracked should use window.postMessage() to send messages to a-page. Then, configure Launch in a-page to listen for those messages, then track accordingly.

I had a similar setup where b-page showed a video and I wanted to track those video interactions. So with every video interaction, I used window.postMessage() to send information about that interaction to my a-page. In a-page, I had a window.addEventListener('message', ...) that would listen for those messages, then send a Custom Event for each message. I then configured a rule in Launch for those Custom Events and tracked to AA accordingly. So effectively, I was tracking every video interaction in b-page to AA in a-page.

Avatar

Level 1

Thanks for this explanation.  The only bit I am curious about, is how you built the custom events to capture the messages you had sent to the window.  Did you use custom javascript for each message to create the data elements? 

Cheers

Avatar

Community Advisor

If you have a data layer in a-page, then in the callback function in a-page's window.addEventListener('message', ...), you'd set the values from b-page's message into your a-page's data layer.

i.e. b-page --> (happens inside b-page) posts message with values --> a-page's listener "hears" the posted message --> (happens in side a-page) takes the values from the message and puts them into its data layer.

Then you can set your data elements to the values that have been added to the data layer.

Avatar

Level 10
Do any of the answers below answer your initial question? If so, can you select one of them as the correct answer? If none of the answers already provided answer your question, can you provide additional information to better help the community solve your question?