I'm trying to register/log ad clicks on my site.
I run video ads and want to know if it is possible to some how register an ad click.
One idea that I'm thinking about is to place a div over the video then onclick do some function foo.
Can you please point me in the right direction ?
If you use Google Anlytics, you can add this to each div you want to track. In GA it will organize the clicks in by what page the user was on for the click and which video was clicked.
onclick="_gaq.push(['_trackEvent', 'Video', window.location.pathname , href]);"
I'm not sure if this is what you're looking for exactly. I would recommend wrapping a div around whatever you're trying to count.
var clicks = 0;
$('#someDiv').click(function(){
clicks++;
});
This will count how many times a user clicks on that div. Or if you just want to see if a user clicked on a div:
$('#someDiv').click(function(){
alert('you clicked on a div');
});
Related
I have searched a lot of information about this but have not found the solution yet.
My problem is the following, I am creating an extension to speed up the movement through several web pages, I have managed it with many of them, but I have come to some where I cannot simulate a click with Javascript and I don't know how to do it.
One of the pages is this: https://sports.betway.es/es/sports/in-play The page is in Spanish domain, therefore I do not know if they can access it from another country (without vpn), although I think that with domain ".com" it works.
The code is as follows, it's pretty simple.
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelectorItemButton")
for(let i=0;i<deportesActivos.length;i++){
let nombre = deportesActivos[i].lastChild.firstChild.innerText
if(nombre == data.deporte){
deportesActivos[i].click()
}
}
deportesActivos I collect the DIV elements with that class from the page.
deportesActivos[i].lastChild.firstChild.innerText I extract the text of each element
if(nombre == data.deporte){
deportesActivos[i].click()
}
When it matches, click to enter the link.
The problem is that the click does not simulate me.
I have bought exactly the element that you click on, I have clicked manually and it works, I have tried to click on other elements of the web page and it does not work, I have tried to give a "listener on click" to the element and it does not work either.
The HTML of the page is as follows:Image with HTML Code of the website
I don't know if this helps but on website build with Ionic app neither works
The click event does not fully simulate a user click. It just fires the onClick handler on the element that you are targeting (and any parents).
If your are just redirecting to a new URL when the button is clicked, you could just do that in your loop instead.
// get the links, not the buttons
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelector");
for (let i=0; i < deportesActivos.length; i++) {
// Drill down one extralevel to get the button text
let nombre = deportesActivos[i].firstChild.lastChild.firstChild.innerText;
if (nombre === data.deporte) {
// Redirect to the href in the link
window.location.href = deportesActivos[i].href;
}
}
Okay, so, my problem is that I have a video in my HTML and I managed it to set it up to play on the mouse hover, but the problem is that it dosen't work until I clicked anywhere on my Website first. For example: If I try to play video by hovering mouse over it, it won't play. But if I click first anywhere on the site, then it's working. How do I fix that? I want to be able to play my video without having to click somewhere first.
Here's my code:
JavaScript:
<!-- Mouse hover over .video1 to play -->
var $video1 = $(".video1");
$video1.on("mouseenter focus", function () {
$video1.get(0).play();
});
It's a new thing recently implemented - the user is required to interact with the page, with either a click or a keypress, before any video or audio can play. So no, this is not possible - but to get around this, you can just add a confirm dialog to the top of your page:
$(function() {
confirm();
var $video1 = $(".video1");
$video1.on("mouseenter focus", function () {
$video1.get(0).play();
});
});
What the above code does is it forces the user to either press "Enter" or "Esc", or to click "Cancel" or "Confirm", to dispel the alert box, so your video will play automatically after that.
I found the best answer for this to be adding the muted attribute to the video element. This allows the video to autoplay without requiring a user gesture first. Explained in more detail here: https://stackoverflow.com/a/50742427/5572739
I have this HTML div with or withouth embeded content, I want to block right and left click.
So if the user clicks or right clicks nothing happens.
Can you do that with HTML/CSS/ Java Script ?
Basicly this is a question about breaking the rules, say you have an youtube embeded video in a div in html, how do you block the click from the user so that if he clicks the video he does not go to youtube dot com.
*note, i am not interested in youtube only, i just want a way to block clicks and right clicks in a div.
So take a much simple scenario:
In a basic HTML page, there is a div with absolute position and size, If the user clicks a link in that div I want it not to work, but if he clicks a link anywhere else on a page I want it to work.
Another way to do ignore the clicks is using css 'pointer-events'.
For instance:
div.style.pointerEvents = 'none'
OR
<div id="content" style="pointer-events:none;">
Use an overlay with a bigger DIV or use the following code
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
Guess this would help you:
function disableClick(){
if(window.event.target.id && window.event.target.id=="myDiv"){
window.event.preventDefault();
}
}
document.onclick = disableClick;
document.oncontextmenu = disableClick;
I have multiple DIVs with unique IDs. Each DIV onclick slides down and shows some content below it.
I would like to track the clicks on each DIV to know which DIV is being clicked the most.
How do I do this with google analytics?
It sounds like you're looking for Google Analytics "Event Tracking." Assuming you already have your regular GA code snippet set up (to track your site), you can then set up a handler (for clicks of the div, let's say) do to something like this with jQuery:
$('.trackerClass').click(function() {
var selId = $(this).attr('id');
_gaq.push(['_trackEvent', 'Interactions', 'Click', selId]);
});
Every div that you wanted to track could have both "trackerClass" as the class, and a unique ID to help you identify it.
If you wanted to track opens/closes individually, you could add a state variable and pass that as well.
More information is available here:
https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide#SettingUpEventTracking
Edit: for straight JavaScript, kennis' answer will do it.
Check out the GA page on Event Tracking: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
The basic idea is:
var someDiv = document.getElementById('someDiv');
someDiv.addEventListener('click', function(){
_gaq.push(['_trackEvent', 'someDiv', 'click']);
}, false);
Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).
Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.
This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.
Now, everything holds.
Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.
The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!
That is definitely not what we want.
So, here is the code which was adapted by Magnar's helpful post:
$('#text_music').click(function() {
$('#jplayer').slideToggle(500, function() {
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#jplayer").slideToggle(500);
$("body").unbind("click");
}
});
});
});
#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin
So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.
However, I need a little assistance in understanding the meaning of this variable.
Anyone want to offer any words of wisdom?
:) Thanks!
Have a look at jQuery outside events plugin to detect events outside of the specific element.