I am developing a system that shows advertisements on mobile devices. Our clients are allowed to use their custom HTML code for their advertisement. We would like to be notified when a user clicks this ad. I can wrap the user's code with some of my code. For example:
<div id="my-code" onclick="myFunction()">
<!-- users code -->
click me!
<button onclick="someCode()" />
</div>
As you can see, the user can use javascript within their advertisements. When the ad is clicked I want to notifiy an external server, but I don't want to change the behavior of the ad. I have tried several approaches and failed to find a working one:
I cannot use ajax since ajax is restricted only to the domain of the
page (advertisements are shown on external pages and cannot connect
to our server). An alternative approach is the use of a tracking pixel, but:
A tracking pixel needs some time to be loaded. If users click an <a>
tag then the pixel tracker added by myFunction() won't be loaded
before switching to the new page. I could prevent propagation of the
event, but:
The advertisement needs to get this click too. I tried to stop propagation of the event in javascript, load the pixel tracker, and then trigger the event again. Doesn't work - <a> tags are not clicked in this way - a click event triggered by javascript exists only on the javascript level.
Any suggestions would be appreciated.
Maybe you could something like this fiddle
<body>
<div id="linkContainer">
<a target="_blank" href="http://www.icrc.org/eng/">Link</a>
</div>
<script type="application/javascript">
$(document).ready(function(){
function beforeLeave(){
alert("Outa here!"); //Replace with function to do ajax-call to server
}
$('#linkContainer > a').on('click', function() {
beforeLeave();
});
});
</script>
</body>
Related
I have the following JavaScript code
<div class="fb-like-box" data-href="snip" data-colorscheme="light"
data-show-faces="false" data-header="false" data-stream="false"
data-show-border="true"></div>
I am trying to detect when the like button is clicked. The above code renders an iframe so my jquery event handler of
$('.fb-like-box > button').on('click', function() { console.log('Clicked'); });
Never fires. I tried wrapping this div and other content in a wrapper div and target that in the $() call but it only fires when the other content is clicked, not the area that is rendered by the Facebook SDK.
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.3
You just need to subscribe to the edge.create event for likes. See docs for example code.
But as commented, you are not allowed to reward users for liking. Read the platform policy for more information: https://developers.facebook.com/policy/
Update: https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings/
edge.create and edge.remove JS SDK Events: These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
This code works for me:
<script>
var liked_page = function() {
alert("liked!");
}
FB.Event.subscribe('edge.create', liked_page);
</script>
I have placed it at the end of the page. Furthermore I believe you should also place
<div id="fb-root"></div>
At the beginning of the page, right after the <body> tag.
edge.create and edge.remove JS SDK Events: These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings/
We have a link on our page of which we want to track the usage. Currently, it's not really a link. It's a <div> tag with a data attribute containing the destination and a click handler bound to it.
When clicked, we send data to Google Analytics, and then trigger a page load with window.location = url after a short delay, so that we're sure that the data has gone through.
This approach works, but it has a major flaw: the clickable element is not actually a link, and behaves like one only in part. For example, I can't use my mouse wheel to click on it and have the link open in a separate tab (as you'd expect), or I can't right click on it and get a menu that is contextual to the link (because it's not a link).
Is there a way to use an <a> tag and get the behavior of a real link, intercept the click event, interact with Google Analytics and then follow the link normally after a small delay (to make sure the data goes through), without having to redirect ourselves and without having to lose functionality?
You can use event.preventDefault() to prevent the link from being followed:
$('a').click(function(e){
e.preventDefault();
var href = this.href;
setTimeout(function(){
window.location = href;
}, 2000)
});
With new HTML5 standards, couldn't you wrap your <div> in an <a> tag? Then you could do:
Inline:
<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);">
<div id ="blah"></div>
</a>
jQuery:
$('gaEvent').on('click', function(){
_gaq.push(['_set', 'hitCallback', function(){
window.location = url; // you'll still have to define this somewhere
}]);
_gaq.push(['_trackEvent','category','action','label']);
});
I totally referenced this SO post - Track event in google analytics upon clicking form submit
I have a test page here: http://www.problemio.com/test.php
and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.
But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.
My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.
I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?
Thanks!
You can do this with pure jQuery with
$("#createprofilelink").click(function(event) {
event.preventDefault();
{create profile logic}
});
more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/
Edit: I removed this because of #maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.
<a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
<script>
$('#thelink').click(function(){alert('alert me');});
</script>
As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.
You could even go down the noscript route
<noscript>
<div>Your user experience would be far improved if you
enable JavaScript but if you insist,
Click Here to create your profile</div>
</noscript>
To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.
I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.
First, here is my code:
<script type="text/javascript">
$('#Advertisement-1').click(function () {
alert("Ad Clicked!");
});
</script>
<div id="Advertisement-1">
<!-- PBBG Ads Zone Code Begin -->
<center>
<iframe src='http://www.pbbgads.com/ad.php?z=429&bg=000000' width='468' height='67' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>
</center>
<!-- PBBG Ads Zone Code End -->
</div>
Now, my issue is when I click the ad, it doesn't send an alert. It just opens the ad in a new window. Any ideas how I can get the click event to work?
click event doesn't works on iframes, because the event does not bubble up through the <iframe> tag's ancestors in the DOM.
Instead you can use the blur event to detect when your parent page is losing focus.
This jQuery plugin is designed to track clicks on iframes : https://github.com/finalclap/iframeTracker-jquery
It's very easy to use, simply select your iframe with a selector, and supply a callback function (will be fired when the iframe is clicked) :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});
The code to alert is in the parent window and the ad I suppose is inside the iframe so it is not possible unless the parent page and iframe are in same domain.
You can't unless you're detecting the click from http://www.pbbgads.com/
How can I prevent users from pressing my web-page buttons before the page is fully loaded?
i.e.
I have a button that opens a lightbox. The JS for the lightbox is loaded last in the page for quicker response time. So if the user presses the button before the page is fully loaded - he either gets a JS error or the lightbox data is opened on a blank page.
I'm using Javascript with MooTools.
If I understand correctly neither
<body onload="...">
nor
$('#yourButton')...
guarantees that the document has finished loading. The (jQuery) method that does:
$(document).ready(function() {
$('#yourButton').attr("disabled", false);
});
Make your button disabled. After the page is loaded - make it enabled
Here is a JQuery(sorry for not being "clean" Javascript example)
$('#yourButton').attr("disabled", false);
here's an example:
<body onload="document.getElementById('button1').disabled=false">
<button id="button1" disabled="1">
ok
</button>
<body>