I've been tasked with removing all Telerik controls from our website. I'm not that good with javascript, so this is a great learning experience for me. Most of the controls are easy to understand and fairly easy to replace, but I'm stuck on one. I need to replace the RadScriptBlock in the following code:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery-migrate-1.1.0.min.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery.json-2.4.min.js"></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/Portal/main.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/Portal/popup.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/SeoTracking.js" ></script>
Based on everything I've read, I think I need to use the following, but I'm at a total loss as to how. Any help/suggestions/resource would be greatly appreciated!!!
new Ajax.Request('/your/url', {
onSuccess: function(response) {
// Handle the response content...
}
});
So this ended up being the fix...
<script type="text/javascript" src="http://localhost:44344/js/jquery-1.9.0.min.js">
</script>
<script>
$.ajax({
url: 'AjaxOrderStepServer.aspx',
success: function () {
debugger;
var baseurl = ConfigurationHandler.getStaticContentBaseURL(Request);
var url = baseurl + "/js/jquery-migrate-1.1.0.min.js";
$.getScript(url);
url = baseurl + "/js/jquery.json-2.4.min.js";
$.getScript(url);
url = baseurl + "/js/Portal/main.js";
$.getScript(url);
url = baseurl + "/js/Portal/popup.js";
$.getScript(url);
url = baseurl + "/js/SeoTracking.js";
$.getScript(url);
}
});
Like Button: (successfully direct uesrs to specific Facebook pages)
Example:
[http://lifelearning.x10.mx/FB-test2.html][1]
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root"></div>
<fb:like href="http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page" send="false" width="450" show_faces="false" font=""></fb:like>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '372744124562', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
// put redirect code here eg
window.location = "http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page";
}
);
};
//Load the SDK asynchronously
(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>
</body>
</html>
Like Box: (unsuccessful)
Example:
[http://lifelearning.x10.mx/FB-test3.html][2]
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root"></div>
<fb:like-box href="http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '372744124562', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
// put redirect code here eg
window.location = "http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page";
}
);
};
//Load the SDK asynchronously
(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>
</body>
</html>
People say this is a bug on Like Box. Some people demonstrate it does work:
http://www.fbrell.com/xfbml/fb%3alike-box
Could anyone who knows well about Facebook please help? I know JS a lot but just know nothing about the API of Facebook. Can anyone tell how to make Like Box work in the same way as Like Button does.
* These are all collected from the web. And the codes are mine.
The issue is that the edge.create event is not fired by the Like Box, so you will not be able to get that to work. I suggest you add your voice to the following bug report about this problem:
https://developers.facebook.com/bugs/310763168934515
I need help figuring out how to successfully redirect while including Analytics code.
I have a subdomain setup http://buuf.fractalsystems.org
The subdomain is actually just a subfolder http://fractalsystems.org/buuf
I have an HTML file in that subfolder which redirects to https://market.android.com/developer?pub=Fractal%20Systems
The code for that redirect file:
<head>
<script type="text/javascript">
function delayedRedirect(){
window.location = "https://market.android.com/developer?pub=Fractal%20Systems"
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']); <!--I have my real ID there-->
_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>
</head>
<body onLoad="setTimeout('delayedRedirect()', 3000)">
<h2>ADW.BuuF.Theme is no more! You will be redirected to new and better apps in 3 seconds.</h2>
</body>
</html>
This works as a redirect only if I don't include my Analytics code. I've tried moving the code around with no change.
QUESTION
How can I add a redirect, of any kind, and still be able to track with Google Analytics?
I've tried PHP redirects with no success and am pretty sure htaccess redirects wont help although I'm open to suggestions.
The reason I'm using a JavaScript redirect is so I can continue to track with Google Analytics and also show a little message or make a custom page with the delay.
Thanks for any help. Doesn't have to be JS, please, any input is welcome if you know of a solution.
Note: _gaq.push allows pushing of functions onto the queue. The following code should redirect after 250 milliseconds (to allow time for the tracking pixel) after the _trackPageview:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']);
_gaq.push(['_trackPageview']);
_gaq.push(function() {
setTimeout(function() {
window.location = "https://market.android.com/developer?pub=Fractal%20Systems";
}, 250);
});
(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);
})();
If you're using the new GA code you can simply replace this line ga('send', 'pageview'); with this code:
ga('send', 'pageview', {
'hitCallback': function() {
window.location = "http://www.your-site.com";
}
});
Example in full:
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function() {
(i[r].q=i[r].q||[]).push(arguments)
},i[r].l=1*new Date();
a=s.createElement(o),
m=s.getElementsByTagName(o)[0];
a.async=1;
a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxx-2', 'auto');
ga('send', 'pageview', {
'hitCallback': function() {
window.location = "http://www.your-site.com";
}
});
I'd suggest changing your Google Analytics code to be synchronous instead of asychronous by changing it to this:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']);
_gaq.push(['_trackPageview']);
</script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
This should guarantee that it runs before your redirect code kicks in and it should be out of the way of your redirect script so there is no interference. As you have it now, you're playing a guessing game for how long the GA script will take to load and that it will load and do it's job in under 3 seconds. That may usually be the case, but there is no reason to load it asynchronously like you are and have to play that game. Load it synchronously and it will do it's job before your javascript redirect fires.
It might even be possible to just put the redirect directly after the GA code like this and minimize the time that your placeholder page is displayed:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']);
_gaq.push(['_trackPageview']);
</script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">
window.location = "https://market.android.com/developer?pub=Fractal%20Systems";
</script>
The code provided by Mike works indeed. However, I found that removing the timer entirely works as well. The __utm.gif request is then aborted, but all information has been sent. The window just redirects and doesn't wait for the reply (which is simply a 200 status). I tested this and it seems to be working nicely.
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']);
_gaq.push(['_trackPageview']);
_gaq.push(function() {
window.location = "https://market.android.com/developer?pub=Fractal%20Systems";
});
(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);
})();
Using meta refresh worked like a charm! Legacy FTW! Thanks, #Balexandre
<html>
<head>
<meta http-equiv="refresh" content="5; url=https://market.android.com/developer?pub=Fractal%20Systems">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']);
_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>
</head>
<body>
<h2>ADW.BuuF.Theme is no more! You will be redirected to new and better apps in 5 seconds.</h2>
</body>
</html>
RECAP: I am now able to redirect while tracking those redirects using Google Analytics!
Meta Refresh (Taken from wikipedia)
Examples
Place inside to refresh page after 5 seconds:
<meta http-equiv="refresh" content="5">
Redirect to http://example.com/ after 5 seconds:
<meta http-equiv="refresh" content="5; url=http://example.com/">
Redirect to http://example.com/ immediately:
<meta http-equiv="refresh" content="0; url=http://example.com/">
Meta refresh is generally discouraged because of usability concerns (especially with a short, or no delay), but as a fallback for clients with no javascript I think it's perfectly valid in this case.
If you combine the synchronous ga.js call with a meta refresh you get the best of both worlds: an almost instant, tracked redirect if JS is enabled; a delayed but still effective redirect if not (and a hard link in the body just in case all else fails).
<html>
<head>
<!--For JS disabled: decent delay, both for usability and to allow plenty of time for JS to work if enabled -->
<meta http-equiv="refresh" content="5;https://market.android.com/developer?pub=Fractal%20Systems"/>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-8']);
_gaq.push(['_trackPageview']);
</script>
<!--Synchronous call to ensure tracking fires before JS redirect-->
<script type="text/javascript" src="//www.google-analytics.com/ga.js"></script>
<script>
/* if JS is enabled this will normally fire well before the meta refresh delay ends: an almost instantaneous redirect */
window.location="https://market.android.com/developer?pub=Fractal%20Systems";
</script>
</head>
<body>
<!-- Include a hard link in case both js and the meta refresh fail -->
<p>Redirecting you to https://market.android.com/developer?pub=Fractal%20Systems</p>
</body></html>
There's a good answer here:
https://www.domsammut.com/code/setting-up-hitcallback-using-google-universal-analytics
In short, you'd do it using an event, and you use the hitCallback function.
This approach does not require a delay. First execute google analytics code synchronously and then redirect.
<html>
<head>
<script src="//www.google-analytics.com/analytics.js"></script>
<script>
var tracker = ga.create('UA-xxxxxxxx-x', 'auto');
tracker.send('pageview');
window.location='http://your-url.com';
</script>
</head>
<body>
</body>
</html>
I think maybe just use jquery ready method so it won't start the timer till the page is fully loaded...
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
setTimeout(function() {
//alert("redirecting!");
window.location = '<?= $url ?>';
}, 3000);
});
</script>
I have a facebook tab with an iframe application and within that tab there is a facebook like button to have a second capability to like the facebook page. It is an ordinary facebook like button iframe.
Is there a possibility to redirect the user when it clicks the button? I tried it the following code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<my app id>', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
alert('like!');
}
);
};
//Load the SDK asynchronously
(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>
But this doesn't work. Is there a way or am I doing something wrong?
I just tested the following code and it works as expected
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root"></div>
<fb:like href="http://yoururlto.like" send="false" width="450" show_faces="false" font=""></fb:like>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
alert('like!');
// put redirect code here eg
window.location = "http://www.mysite.com/redirected.html";
}
);
};
//Load the SDK asynchronously
(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>
</body>
</html>
How does it compare to your own page?
I am using the Facebook Graph API (javascript one).
I am trying to get the canvas size using the function FB.Canvas.getPageInfo()["clientWidth"];
But it always bloody returns zero, why?
Maybe its when I call the function? Maybe its meant to be zero, but I dont think so because if it was I would not be able to see my HTML inside the canvas because the width is zero right?
My code:
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init( {appId: 'MYAPPID', status: true, cookie: true, xfbml: true} );
};
(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>
</body>
<script type="text/javascript">
<!--
alert( FB.Canvas.getPageInfo()["clientWidth"] ); // PS other SDK calls do work likelogin so I know my app id etc are correct
-->
</script>
</html>
the function assigned to
window.fbAsyncInit is run as soon as
the Facebook JS SDK is loaded. Any
code you want to run after the SDK is
loaded should be placed within this
function and after the call to
FB.init().
now try this.
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init( {appId: 'MYAPPID', status: true, cookie: true, xfbml: true} );
alert( FB.Canvas.getPageInfo()["clientWidth"] );
};
(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>
</body>