My clients have put in their website my web-widget, implemented as <iframe> showing a button. I want to track analytics around my clients websites that implement my web widget: how many clicks, and from which websites.
So the <iframe> has src pointing to an html file on mywebiste.com, indeed the html content that shows the button is on my host service and I have access to the code of course.
The widget is used by 3rd party websites. They import my script that put the <iframe> in their webpage. So parent 3rdparty.com has <iframe> pointing to mywebiste.com.
Now, I have put in each html pointed by <iframe>, the GoogleTag integration. I've created a custom-event "click" as trigger, and a "tag" that creates a "GA4 event" to analytics.
If I put these widgets on mywebiste.com as test, triggers and events work and I see on analytics.
If I put this widget on 3rdparty.com, triggers and events don't work. And I can't debug GTAG because is not my website.
Why? Theoretically, inside the iframe there is an independent page, that should send the event to my GoogleTag container, with fields "Hostname" as 3rdparty.com.
This is the example code: Besides using the trigger "element click", I also manually push dataLayer to trigger the custom event.
<!-- 3rdparty.com/index.html -->
<html>
<!-- I pass hostname as param -->
<iframe src="https://mywebiste.com/widget.html?hostname=3rdparty.com"></iframe>
</html>
<!-- mywebiste.com/widget.html -->
<html>
<head>
<!-- import Google Tag manager -->
</head>
<body>
<button onclick="fireEvent()">Click me!</button>
<script>
function fireEvent()
{
var hostname = getUrlParamValue('hostname'); // = 3rdparty.com
window.dataLayer = window.dataLayer || [];
var event = {'event': 'button_click', 'Page Hostname' : hostname};
var console.log(event); //this is showed on 3rd party website console
window.dataLayer.push(event);
}
</script>
</body>
</html>
I would like to have stats about clicks of the button, with the hostname source details (3rdparty.com)
