Can I track if a click is done inside of an iframe on a different website vs directly on my website?

Data collection and tags
1

Hi All,
If our website(abc.eu) is put inside of an iframe on a different website(cba.eu), does Piwik Pro provide a way to distinguish between clicks directly on our website(abc.eu) vs clicks on the website(cba.eu), where our website(abc.eu) is inside of an iframe?
Thank you,
Dmitry

2

Hey @Dmity,

You can can send messages from the iframe to the parent website -

window.parent.postMessage({ type: 'PiwikPRO', payload }, '*');

where payload is an array with the event for e.g.

["trackEvent", "Exit intent", "Click on button", "Cancel"]

You can read more about the event structure here - API — Piwik PRO Analytics Suite 16.33 documentation

Since you want to track clicks inside of the iframe, you will need to add a listener to the element that you are interested in and send the message like described above whenever there is a click.

You can easily change the values of the events to later differentiate them from the events on your website.

We got the sending part covered but now we need to capture the event on your parent website. This can be done by adding an Iframe tracking handler - Solution Templates | Piwik PRO

The handler will catch messages sent from the Iframe and send as events to the tracker.

You can create a new tag and set the trigger on All Page Views or only on the page that the iframe is on (it is up to you) and add the Iframe tracking handler code.

Please let me know if you have any further questions :slight_smile:

1 Like
3

Hi @kamilb,
We have Piwik Pro(PP) on website abc.eu, that is displayed on cba.eu inside of an iframe. when you say “parent” website, which website from my example do you mean?
Thank you,
Dmitry

4

Ohh so you have Piwik PRO added into the website that is an iframe? or both? The solution I mentioned above is if you would have Piwik PRO added only to the parent website (cba.eu in the case above).

5

Hi Kamil,
That’s what I thought. In our case, we have Piwik PRO added into the website(abc.eu) that is an iframe inside cba.eu. cba.eu doesn’t have Piwik Pro. Is there a way to distinguish between clicks directly on our website (abc.eu) vs clicks from the website(cba.eu), where our website(abc.eu) is inside of an iframe?
Thank you,
Dmitry

6

Hi @Dmity,

In this case you would need to check if the website is loaded in an iframe.
You can create a Custom JS variable (Create a variable | Piwik PRO help center) with the code below -

function() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

After the variable has been created, you can create a new session dimension and name it for exampe “Iframe status”. If you don’t know how to create a dimension, here is a guide which you can follow - Create a custom dimension | Piwik PRO help center

Once the dimension has been created, please navigate to the Piwik PRO tag in the tag manager (Menu > Tag Manager > Tags > Piwik PRO) and under “Collect data for custom dimensions” please click on Add a dimension, select the newly created dimension from the dropdown and select the newly created variable as the dimension value. Once this is done you can just click save and this way you will be able to differentiate between Iframe and non-iframe actions. Iframe users will have this dimension value as true and non-iframe users will have this as false.

Please let me know if you have any additional questions :slight_smile:

7

Hi @kamilb ,
Thank you! I did, as it was suggested and I can see records, however, I can also observe goals with names containing zeros, that I didn’t create. Could you please take a look?

2022-09-16_16h15_10
2022-09-16_16h15_101460Ă—650 32 KB

Thank you,
Dmitry

8

Hi @Dmity,

Sure, can you please let me know what is your instance URL?

9

Hi @kamilb ,
I’ve sent you the URL in a direct message. Let me know if you have further questions.