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/
Related
I need to create a blank webpage with the url like: https://www.example.com/callme and we will share the link with our customers.
When someone clicks the link, a blank page will load, and as soon as the document is ready or dom content loaded, it has to automatically dial a specific number on mobile devices.
Basically you can do this with a link tag with href "tel:xxxxx", but i need it to be automatically clicked when the page load, not to click/tap it manually.
Here is what i tried so far but with no success:
document.addEventListener('DOMContentLoaded', function() {
$('#call').trigger('click');
}, false);
and
$(document).ready(function(){
$('#call').click();
});
and
$(document).ready(function(){
$('#call').trigger('click');
});
and here is the simple html:
Call me
Any advice is much appreciated, thanks in advance
Simply include this one-liner to change your client's url to your tel-link
window.location.href="tel:123456789";
If they are on a device that has a handler for tel-links (a mobile-phone for example) their phone app will open and give them the opportunity to call you
I would like to track if a toast (or any "popup element") gets displayed using Google Analytics Event Tracking via GTM.
Whether or not the toast gets displayed is defined by jQuery code and based on cookie information like so
function ShowToast(Msg){
$('#toast-msg').html(Msg);
$('#toast').animate({ left: '-10px' });
}
called by
<script type="text/javascript">
$(function() {
ShowToast("SOME HTML");
});
</script>
This is what I got in GTM so far using a custom variable
function(){
if(document.querySelector("#toast #toast-msg").length > 0){
return true;
}
}
with a trigger listening for this variable to be true and the usual Universal Analytics Event Tag. The idea is to simply check if the toast-msg is shown or not, which works fine in preview mode.
Now to the problem: The tag is listening to gtm.js (pageview), but the jQuery code from the toast might load only after gtm.js is ready. Hence, sometimes the toast is not yet displayed when the tracking code is ready to fire and the event is not recorded.
Is there a way to use GTM and Javascript / JQuery to make sure all JQuery is loaded before GTM variables/triggers/tags are resolved? Or a completly different approach?
Make Sure you have the dataLayer initialized in the <head> of your document by including this line of code: <script>window.dataLayer = window.dataLayer || [];</script>
Add this code to your jQuery toasts (or whatever else you want to track) dataLayer.push({'event': 'event_name'});
Create a Custom Event trigger in GTM with the event_name you chose above.
Create a GA Tag of type event with the above trigger
One method is to push an event to dataLayer when the popup is loaded.
the other method is you can fire your code and gtm.dom or gtm.load(when the page is completely loaded)
Check the related article for more details http://marketlytics.com/analytics-faq/control-gtm-tags-to-wait
While using the dataLayer works, as suggested by others, I also found that my code works using two alterations:
Change errenous code: document.querySelector("#toast #toast-msg").innerHTML.length > 0 I forgot the innerHTML attribute
In order to ensure that jQuery has loaded I changed the trigger type to gtm.dom, which triggered the event reliably thus far.
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>
I wonder if i've unset($_SESSION['enough']); and want to free it up on closing the page.
[ suppose visitor is viewing page of the website pages in new tab ]
i'm using this code
<script language="javascript">
window.onbeforeunload = function() {
console.log('event');
return false;
}
</script>
i wonder how can i apply to fire this code unset($_SESSION['login_id']); , it might look ridicules but this is the basic idea and i'm gonna give example what can be used for
For example : media website would like members not to watching more than one video in same time so the watching page drop session and free it on closing it so can watch more! js indeed is essential for website using jwplayer so no chance of talking about members with disabled js.
In order to load the killsession.php that runs the unset() command, you can run that page with ajax with async:false
Have a look at
Ajax request with JQuery on page unload
jQuery.ajax({url:"http://localhost/killsession.php", async:false})
You can use jQuery to fire on unload with the unload function (http://api.jquery.com/unload/).
$( window ).unload(function() {
// On the unload, we can fire a request back to the server
// .get(), .post(), and .ajax() may be useful.
});
If I have a website loaded inside an iFrame, like this:
$("#myIframe").attr("src",url);
...is it possible to capture a URL of a new page when a user clicks a link withing that site?
You can attach to the onLoad Event
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
or
$('#myIframe').load(function() {
alert("the iframe has been loaded, pull the src");
});
Working Sample per Muthu Kumaran:
http://jsfiddle.net/muthkum/DuRTR/
You cannot access the content of an iframe from the page containing it since that would allow you to do alot of evil stuff like steal session cookies, make the user click stuff he didn't want to on another site, etc..
Glennulars answer will apparently work tho. :)
I don't know if events bubble up to the iframe, but you could try:
$("iframe").click(function(e){
console.log('something was clicked');
});