as you might know it's not possible to track iframe interactions using GTM click triggers so in this video I will show you an alternative way of how you can track people who have interacted anywhere inside of your iframe to estimate how often this element is used we will use Google analytics events in my examples but setup can be easily adjusted for any other vendors since we can't use default triggers to reliably detect interactions with an if frame we will use JavaScript template for that you can copy this snippet from my blog post and the link
is in the description of this video then open your Google tag manager and there we will create a new tag so go under tags and create new one here you will need to select tag type custom HTML and paste your code here don't save it yet as we will need to adjust a few things for this script to work for your specific scenario so let's quickly take a look at the code first of all at the top we have a function that focuses on our current window since we determine if an iframe is selected by
using a focus event this resets Focus to the main window in case it's modified at some point before our script loads next we have a variable where we Define CSS selector that we want to use for our iframe it's important to adjust this value in case you have multiple if frames on the page otherwise your data will include interactions with all of those if frames so in this case I have specified iframe as a CSS selector and it will fetch all elements that have an iframe tag if you're not sure how to get a CSS
selector for your if frame you can check my article on GTM Dom elements to get some sense on how to do this or alternatively you can explore CSS selectors on your own in more detail detail I have added links in the video description so regarding CSS selectors let's take a look at an example on my website I have a map in an ey frame and you might have some other snippets on your website and to get a CSS selectors first we need to inspect an element and you can do that by right clicking on your
element and inspect I'm using Chrome but this should be similar in other browsers as well so from the develop window you need to find your if frame so since we have selected element that is inside ey frame we need to go up the D Tree and find an i frame so I have here iframe and what we are interested here is additional parameters that can distinguish this specific ey frame so in my case I have both ID and a class name and I can use those in my CSS selectors so for example if you would
have an ID and I have ID example if frame you would copy that and go back to tag manager edit iframe selector variable and here after iframe add hash and your ID value which in my case was example iframe and we are adding hash because this is part of CSS selector syntax so if you would have a class name you would copy your class name and use a DOT here for your iframe so in my case I had the same class name as an ID so if I go back you see I have class equals
example if frame and that's why I can use also this selector to Target this if frame also note that any changes that you do here should still be included in double quotes otherwise this snippet will not work again please check additional links in the description if you want to explore how CSS selectors work in more Det detail in case you have only one if frame on the page and you are sure that there will not be any additional if frames then you should be good to go with the default CSS lectors as well which was
just iframe all right the next variable that we have here is Google analytics event name and this is the value that will be sent to G4 and will be displayed in your report you can adjust this name to whatever you see fit for your event naming convention it's also fine to leave it the same as I have in my template then we have a bunch of code that you should not add it unless you feel confident with JavaScript first we are creating an event listener when our main window is blurred for example it can be
blurred when we focus on iframe or switch to another Tab and then we check if currently focused element is in our if frame so we are using CSS Lector that we have provided above so when you click somewhere inside an if frame your current window is technically blurred in the browser and the active element will be your iframe element so if the active element is our iframe we are sending a data layer push with provided event name as you might have guessed we will use the data layer event GA event as a trigger to send
data back to Google analytics if you feel confident you can also modify GA event to whatever value that fits best for your setup or add data variables to collect additional information now we only need to add a trigger for this tag and you can run this script either on all pages or you can Target only page with an iframe if you have your iframe only on one page or just a couple of pages I would recommend limit in this code only to those side sections to reduce the number of scripts loaded elsewhere so in my
case I had this URL for my page so I will copy that and I will quickly add a trigger that fires only on that page so you can click on the plus sign and page view some pages page path contains your page and now we can name our tag and save it now after we have saved the JavaScript template let's create a custom event trigger that will notify GA tag about the iframe click go to the trigger section and create a new one from trigger type select custom event and the event name will be the
same as you have in JavaScript template in my case it was G event in case you're using a different value then you need to change it here now let's name the trigger and save it finally let's send an event to Google analytics let's go back to tag section and create a new tag from TAG type select Google analytics G4 event now pick your measurement ID variable if you have created that one in Google tag manager or you can just use Google analytics data stream measurement ID here so it would be like g 1 2 3
4 5 Etc I have a variable for that so I will use that for event name we will use a dynamic value that we are passing from our custom script to do that we will fetch data layer contents so let's click on the plus sign to add the new variable and click here as well variable type will be data layer variable and data layer variable name will be eventcore name because this is the value that we have used in our dataware push here now let's name and save our variable and you will see it is
automatically applied as our event name now all we need to do is to apply the new trigger that we have just created called GA event click on trigger and select GA event and that's it for the setup so now you can save your tag now you are ready to test your iframe interactions and to do that you can open a preview mode then enter URL where you have your if frame and click connect now if I interact with this s frame and open tag assistant I will see GA event and this is what you should
see for your iframe interactions as well so if you click on that we will see that G4 event is fired you can also refresh the page to check if events is not triggered when you only load the page and do not interact with the iframe so let's go back to tag assistant and switch to the new page and you can see no event is fired then we go back to iframe interact with it and when you go back you will see our new event is triggered together with the G4 using this method we can track
only the fact that a visitor interacted anywhere within the KN frame we can't see what elements were clicked to see what elements exactly were clicked we would need to have our Google tag manager or other custom code added inside thirdparty service provider iframe which in most cases isn't possible still having the possibility to see how many visitors interact with an KN frame is better than nothing so if you found this approach useful please like this video And subscribe to my channel to see more similar tutorials in the future thanks for watching and see you in
the next one
