Going out of my mind on this one.
I have Facebook like buttons on my ecommerce store. I have set them up using the XFBML and JAvascript SDK.. I am using the correct Meta OG properties.. everything work fine for facebook.
Now this is where it goes wrong: I was trying to follow this guide: http://www.websharedesign.com/blog/how-do-i-track-that-little-facebook-like-button-in-google-analytics.html but it doesn't work for me as there a couple of differences. Firstly Im using the Async version of Google analytics... Secondly, my facebook like buttons get the URL automatically (In this article the user has manually put in the href...) So i changed the code to add in the gaq.push method instead;
I have tried adding:
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', 'facebook', 'like', href]);
});
into the main Async Facebook script, i have tried putting this on its own at the bottom of the page.. I have even tried adding this as an onclick= on the actual fb:like.
The only time i got it to register anything was when i accidentally added that code in my main Google analytics and then it generated a report for every page view as an event...
Please help!!
EDIT this is all my code: I have GA at the top of my page...
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'xxxxxxxxxxxxxxx']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Then below this FB is defined at the top of the body:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxxxx', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Facebook Like');
_gaq.push(['_trackEvent', 'facebook', 'Facebook like', 'test']);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
You see I have a put the gaq.push in the facebook code above - with an alert. Now this alert is fired when i click like, but the trackEvent is not sent to google? (Also, ideally where it says 'test' I would like the URL of the page...)
Thanks guys.. after 7 hours i worked out what the problem was... I had my IP hidden from Google Analytics as i didn't my test visits to mess up the stats of th regular pageviews.. So i learned the hard way that it also hides your IP addres from track Events! For reference the code that I supplied before works perfectly.. the only thing I changed was the changing the 'test' to url to get the href of the page being liked, so my final Facebook code was:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxxxx', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Facebook Like');
_gaq.push(['_trackEvent', 'facebook', 'Facebook like', href]);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
What a muppet! Thanks for your help though!
Related
I keep getting JS errors in my browsers web console, I have been able to clean up some but I also seem to break more and more the harder I try. I'm not exactly the most experienced JavaScript coder and I just don't know how to solve this to prevent further issues on my clients site.
Any help or insight on what I could do would be much appreciated!
[21:34:36.569] TypeError: $ is not a function # http://bolivares.com/shop/aurelio-tank-baby-blue/:103
http://bolivares.com/shop/aurelio-tank-baby-blue/
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35293709-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
/* <![CDATA[ */
// call fancybox
function openFancy(){
setTimeout( function() {$('#autoStart').trigger('click'); },3000); // show after a second
}
// create cookie on button click
function dontShow(){
$.fancybox.close(); // optional
$.cookie('cookie1', 'yes', { expires: 30 }); // expiration in 30 days
}
function askLater(){
$.fancybox.close(); // optional
$.cookie('cookie2', 'yes', { expires: 7 }); // expiration in 30 days
}
</script>
<script>
$(window).load(
function() {
var visited = $.cookie('cookie1') || $.cookie('cookie2') || $.cookie('cookie3'); // create cookie 'visited' with no value
if (visited == 'yes') {
return false;
} else {
openFancy(); // cookie has no value so launch fancybox on page load
$.cookie('cookie3', 'yes', { expires: 3 }); // expiration in 30 days
}
$('#autoStart').fancybox();
function toggleStuff(){
$('li.toggle-content').hide();
$('h4').click(function() {
$(this).find('ul').slideToggle();
});
}
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = 590,top = 275');");
}
});
</script>
It looks like you are trying to use jQuery but has not linked it in your source code. Try link it in your code.
And also as a general rule I would say to you to test very small parts of the code. Code one line or two and test it. This way you will know what coused the error and it will be easier to fix.
Make sure that you're including jQuery in your code BEFORE you run this function and any which require $. If this is already the case, check your console to make sure nothing is breaking it.
EDIT: Just took another look. Turns out the issue is that one of your plugins is calling jQuery.noConflict() (http://api.jquery.com/jQuery.noConflict/) Try using jQuery in this place instead of $, or if you're feeling risky, try resetting jQuery with $ = jQuery;
On a site I'm working on, the main section of the tracking code is located at the bottom of the pages (not my choice of placement, but that's where it is). That code is the main:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
On one specific page, I want to track an event that gets auto launched on page load. What I have for code at the top of the page (and therefore in a separate tag than the above code) is:
function getFile()
{
if("<%= getFileURL()%>".length>0){
window.location.href = "<%=getFileURL() %>";
var _gaq = _gaq || [];
_gaq.push(['_trackEvent', 'Downloads', '<%= getFileURL()%>']);
}
}
It doesn't seem to be tracking the event though. I'm sure I'm doing something wrong here and I can take some guesses, but it's not clear enough for me to know exactly what I need to change.
Two problems with your code:
You're redirecting before tracking the event. For best results (like #EkoostikMartin mentioned), you'll want a slight delay between the event tracking and redirect.
You've got a local _gaq defined inside getFile(), so you're not talking to the actual Google analytics code.
Try:
function getFile() {
var href = "<%=getFileURL() %>";
if (href.length > 0) {
_gaq.push(['_trackEvent', 'Downloads', href]);
setTimeout(function(){window.location.href = href}, 100);
}
}
You need to delay the redirect. Something like this below has worked for me in the past:
function getFile() {
var href = "<%=getFileURL() %>";
if(href){
_gaq.push(['_trackEvent', 'Downloads', href]);
setTimeout("gotoUrl('" + href + "')", 100);
}
};
function gotoUrl(href) {
window.location.href = href;
};
I'd like to remove the Google Analytics URL tracking code from the browser bar so that when a user copy / pastes the URL to share they don't bring along all the tracking data with them, which is both useless and able to skew the data down the road.
So I'm using history.js to run replaceState to basically get rid of the tracking data from the URL after a brief pause.
<script type="text/javascript">
setTimeout(function() {
if( window.location.search.indexOf( "utm_campaign" ) >= 1 ) {
window.history.replaceState( null, document.title, window.location.pathname);
}
}, 1000 );
</script>
Does anyone see any possible complications or problems with such a method?
The only problem that you might have is that Google Analytics might not have been fully loaded by the time that your timeout code runs.
With the Google Analytics tracker, there is an API that lets a function be queued after the GA data has been sent off to Google.
You can do something like this:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(function() {
var newPath = location.pathname + location.search.replace(/[?&]utm_[^?&]+/g, "").replace(/^&/, "?") + location.hash;
if (history.replaceState) history.replaceState(null, '', newPath);
});
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Notice line 4, where a function is pushed to the _gaq object.
This function will replace the URL straight after the GA request has been sent.
When I click on my FB log in button the FB auth dialog pops up. After I enter my FB credentials the dialog redirects to a url like this:
https://www.facebook.com/dialog/permissions.request?wholeBunchOfQueryParameters
or, if I was already logged into FB, the popup dialog is:
https://www.facebook.com/dialog/oauth?wholeBunchOfQueryParameters
but those are blank dialogs that stay open. Once I close the dialog the callback happens but not until then. This is the behavior on IE and Chrome.
I did have this working fine and I think it stopped working when I got a new computer so maybe it is environmental. I thought it has worked since then but maybe not. I reverted to a version of my code that was working and it no longer works either so that further suggests that it is environmental but I don't know what it could be. I could be off in the weeds.
Also, one other bit of info, I'm developing locally so I'm using localhost:port. I did a ton of research on this issue and did see someone say to use 127.0.0.1 instead of localhost so I did try that as well but it didn't make a difference.
Any idea why the dialogs won't close?
<fb:login-button perms="email,user_checkins" onlogin="afterFacebookConnect();"
autologoutlink="false" ></fb:login-button>
<div id="fb-root" style="display:inline; margin-left:20px;"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'myAppId',
status: true, cookie: false, xfbml: true
});
};
function afterFacebookConnect() {
FB.getLoginStatus(function (response) {
alert("Hi");
var access_token = FB.getAuthResponse()['accessToken'];
if (response.authResponse) {
window.location = "../Account/FacebookLogin?token=" +
access_token;
} else {
alert(FB.getAuthResponse);
}
});
};
function logout() {
FB.getLoginStatus(function (response) {
var access_token = FB.getAuthResponse()['accessToken'];
if (response.authResponse) {
window.location = "../Account/Logout";
} else {
// user clicked Cancel
}
});
};
$(document).ready(function () {
if (document.getElementById('fb-root') != undefined) {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
});
</script>
This is a known bug that has surfaced in the last few days (see https://developers.facebook.com/bugs/241915819261223).
The good news is one of FB's Engineers has just stated the following, so we should see this resolved shortly:
We have a fix for this issue and it will be pushed soon. Stay tuned.
i'm loading the facebook js sdk via the window.fbAsyncInit function. it's working fine in chrome but in safari and firefox FB.Auth._loadState has the state 'loading' forever and non of the FB.* functions are working.
anyone experiencing the same problem? do i need to set some special headers?
any help would be appreciated.
update
<div id="fb-root"></div>
<script>
var app_id = <?=conf_app_id?>;
window.fbAsyncInit = function() {
FB.init({appId: app_id, status: true, oauth: true, cookie: true, channelUrl: 'https://www.example.com/channel.html'});
}
$(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
});
</script>
i think it might be an issue with the loadbalancer :( does anyone know if facebook is crosschecking the ip/session or something after loading the sdk?!