Skip to content

Instantly share code, notes, and snippets.

@asakpke

asakpke/iframe4.html

Created September 3, 2023 06:56
Show Gist options
  • Save asakpke/9f9d7c81217ec1576442ba029ae0a941 to your computer and use it in GitHub Desktop.
Save asakpke/9f9d7c81217ec1576442ba029ae0a941 to your computer and use it in GitHub Desktop.
Download ZIP
Track clicks on iframe with time duration
Raw
iframe4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>SAS - Before iframe</h1>
<div id="taboola-slot">
<div>Something</div>
<span class="close">
<span id="close-timer" style="color: rgb(0, 123, 255);"></span>
<span id="close-button" onclick="closePopup()" style="display: none;">X</span>
</span>
<iframe
id="iframe1"
src="https://esite.pk/"
frameborder="0"
style="width: 500px;
height: 400px;
"
>
</iframe>
</div>
<h1>EAS - After iframe</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let isOverRAI = null;
// let RAIClick = -1;
let RAIClickStartTime = null;
let RAI = null;
// document.addEventListener('DOMContentLoaded', function() {
// document.addEventListener('load', function() {
// document.addEventListener('onload', function() {
// window.addEventListener('load', function() {
// $(document).ready(function(){
// }); // $(document).ready(function()
// });
// (async() => {
// console.log("waiting for jQuery");
// while(!window.hasOwnProperty("jQuery")) {
// await new Promise(resolve => setTimeout(resolve, 100));
// }
// console.log("jQuery is loaded.");
// console.log("waiting for taboola iframe");
// while(RAI.length != 1) {
// console.log("while(RAI.length != 1)");
// RAI = $("#taboola-slot").children("iframe"); // Read Articles Iframe
// await new Promise(resolve => setTimeout(resolve, 100));
// }
// console.log("taboola iframe loaded.");
// })();
async function loadRAI() {
RAI = $("#taboola-slot").children("iframe"); // Read Articles Iframe
console.log("waiting for taboola iframe");
while(RAI.length != 1) {
console.log("while(RAI.length != 1)");
RAI = $("#taboola-slot").children("iframe"); // Read Articles Iframe
await new Promise(resolve => setTimeout(resolve, 1000));
}
console.log("taboola iframe loaded.");
RAI.mouseenter(function(){
console.log('mouseenter()');
isOverRAI = 1;
}); // RAI.mouseenter(function()
RAI.mouseleave(function(){
console.log('onmouseleave()');
isOverRAI = -1;
}); // RAI.mouseleave(function()
} // function loadRAI()
loadRAI();
document.addEventListener("visibilitychange", () => {
console.log('document.visibilityState');
console.log(document.visibilityState);
// if (isOverRAI == 1
if (isOverRAI != null
&& document.visibilityState == 'hidden'
) {
console.log('RAI Click')
// RAIClick = 1;
RAIClickStartTime = new Date();
}
// if (RAIClick == 1
if (RAIClickStartTime != null
&& document.visibilityState == 'visible'
) {
let iframeClickEndTime = new Date();
let iframeClickTimeSpent = iframeClickEndTime - RAIClickStartTime;
if (iframeClickTimeSpent >= 3000) {
console.log('timeSpent >= 3000');
// RAIClickStartTime = null;
// SAS - Enable close button
$("#close-button").css("color", "red");
$("#close-button").css("font-size", "2em");
window.popup_closeable_in = 10;
$("#close-button").show();
// EAS - Enable close button
}
else {
console.log('timeSpent < 3000');
// RAIClickStartTime += iframeClickTimeSpent;
}
RAIClickStartTime = null;
isOverRAI = null;
} // if (RAIClickStartTime != null && document.visibilityState == 'visible')
}); // document.visibilitychange()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment