I'm about to create my first HTML5 ad and to upload it to my AdWords campaign. Any chance I can somehow get AdID of the device that reuqests my HTML5 ad?
I wonder if I can achieve it with my ad's Javascript code.
Maybe you can skip doing it in the ad itself, and add a value track parameter to your tracking template? e.g. {lpurl}?adid={criteria}
https://support.google.com/adwords/answer/2375447?co=ADWORDS.IsAWNCustomer%3Dfalse&hl=en#
<script type="text/javascript">
function trackConv(google_conversion_id, google_conversion_label) {
var image = new Image(1, 1);
image.src = "//www.googleadservices.com/pagead/conversion/" + google_conversion_id + "/?label=" + google_conversion_label + "&script=0";
}
</script>
<a onclick="trackConv(1234567890, 'LQV8CNq6RxCKlPbvAw');" href="http://www.example.com">Link</a>
Related
I know that it is possible to get the number of concurrent viewers for a specific live streaming YouTube event with this link: https://www.youtube.com/live_stats?v={videoid}
I was wondering if is it possible to get the live_stats for a channel or playlist instead of a specific live event.
I want to embed this data in a webpage that will have multiple different live events occurring weekly. Changing the video id for each event will be a burden. If this can't be done directly, is there a way to get the video id of a current live event from a channel and use java script or php to replace the id in the link? Please help me figure this out.
After some time, I figured this out myself...
I created a PHP script that retrieves the video id of the first video in a playlist and puts the id into the live stats link. I take the link of live events and put them into a playlist for easy use.
<?php
// Retrieves video info from Youtube playlist. Just update [PLAYLIST_ID] and [API_KEY]
$json_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=1&playlistId=[PLAYLIST_ID]&fields=items%2Fsnippet%2FresourceId%2FvideoId&key=[API_KEY]";
$json = file_get_contents($json_url);
$json=str_replace('},
]',"}
]",$json);
$data = json_decode($json, true);
$videoId = $data['items'][0]['snippet']['resourceId']['videoId'];
$viewers = file_get_contents("https://www.youtube.com/live_stats?v=$videoId");
echo $viewers;
?>
I then created an HTML page where the data is dynamically updated using jQuery.
<html>
<body>
<div id="status" style="color: #666; line-height: 24px; font-size: 19px; font-weight: normal; font: 19px Roboto,arial,sans-serif;"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function update() {
$.ajax({
url: 'viewers.php',
dataType: 'text',
success: function(data) {
if (parseInt(data) == 0) {
$("#status").css({ display: "none" });
} else {
$("#status").text(parseInt(data) + ' watching now' );
}
}
})
}
update();
var statusIntervalId = window.setInterval(update, 5000);
</script>
</body>
</html>
This is how far I got. Now I am just wondering if there is a better way to combine these codes together to create less server requests. Each jQuery request happens every 5 seconds and is approximately 240 bytes is size. Even though the requests are small, they might still slow down a page.
If you can, please help me improve my solution. Thank you in advance.
I need to know if a link will open.
See Maximilian Hoffmann's answer for a more robust solution.
An approach like this is common - hijack the timeout to redirect to a different URL. Would this approach work for you?
<a id="applink" href="comgooglemaps://?q=Red+Lobster+Billings">Show map</a>
<script type="text/javascript">
var backup = "http://maps.google.com/?q=Red+Lobster+Billings";
function applink(fail){
return function() {
var clickedAt = +new Date;
setTimeout(function(){
if (+new Date - clickedAt < 2000){
window.location = fail;
}
}, 500);
};
}
document.getElementById("applink").onclick = applink(backup);
</script>
The solution is adding an iframe with the URL scheme to your page. It silently fails if the app is not installed, so you need to check via a timer if opening the app worked or not.
// detect iOS
if (['iPhone', 'iPad'].indexOf(navigator.platform) > -1) {
// create iframe with an Apple URL scheme
var iframe = document.createElement('iframe');
iframe.src = 'twitter://';
// hide iframe visually
iframe.width = 0;
iframe.height = 0;
iframe.frameBorder = 0;
// get timestamp before trying to open the app
var beforeSwitch = Date.now();
// schedule check if app was opened
setTimeout(function() {
// if this is called after less than 30ms
if (Date.now() - beforeSwitch < 30) {
// do something as a fallback
}
});
// add iframe to trigger opening the app
document.body.appendChild(iframe);
// directly remove it again
iframe.parentNode.removeChild(iframe);
}
I wrote a post with a more detailed example that uses this approach to open the twitter app on iOS if installed.
There isn't a way for you to know if a link will work but there is for Safari with something called Smart App Banners
<!DOCTYPE html>
<html>
<head>
<meta name="Google Maps" content="app-id=585027354"/>
</head>
<body>
The content of the document......
</body>
</html>
What it basically does is checking if an app is installed. If it's not installed the user will be directed to the app store. If it's installed the user will be able to open the app from the website with the relevant data you'd be normally passing using the url scheme.
You could use if for Google Maps.
The down side of this is that it will only work on Safari but it's still better than nothing.
I've got an odd issue that I cannot figure out. When using Twitter and Google+ share buttons, it shares the correct page title, but also gives a completely wrong URL.
What's even more weird is that it is using a URL from another website of mine, completely unrelated!
These are the buttons:
<li>Tweet</li>
<li><div class="g-plusone" data-size="medium" data-annotation="inline"></div></li>
Here is the javascript that powers them:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I've made sure to be logged into the right account when grabbing the code for the buttons.
I don't get it!
ps. It is being done within my own Wordpress Template if that helps, but I've done this before with no problems.
Make sure you don't have a rel=canonical link on your page pointing to a different URL. Perhaps another plugin is outputting it?
I can't seem to get this to work, while I have been doing so in the past, succesfully...
I'm trying to embed a Google Maps iframe in a web page. The iframe won't load, showing an error message, saying:
Chrome, in console: Refused to display document because display forbidden by X-Frame-Options.
IE9, on the page: This content cannot be displayed in a frame
The steps I take are:
Go to google maps in the browser
Go the place I want to have embedded
Click the link icon
Copy paste the link that's presented under the label 'Paste HTML to embed in website'.
I'm using ASP.NET MVC4, running locally in IIS Express, but the same happens on the server in IIS7.
Strangely enough, when I just create a local HTML file and open that from the filesystem, I don't have the problem.
When pasting the code in jsfiddle, it does seem to work.
Do I need to configure IIS or add something to my headers, or anything like that?
The HTML snippet
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.be/maps?f=q&source=s_q&hl=en&geocode=&q=Kortrijk,+Belgium&aq=0&oq=kortrijk,+bel&sll=50.802805,3.279785&sspn=0.351067,0.617294&t=h&ie=UTF8&hq=&hnear=Kortrijk,+West+Flanders,+Vlaams+Gewest&ll=50.802897,3.280106&spn=0.350496,0.617294&z=11&iwloc=A&output=embed"></iframe>
Thanks to the sharp and insightful eye of a colleague of mine, we have found the issue.
First of all it only seems to appear on the Belgian maps, http://maps.google.be, (afaik, obviously), and not on the http://maps.google.com.
When calling the IFRAME content, google redirects the IFRAME content to the same URL, but with ?wmode=transparent appended.
The browser does not allow multiple '?' in a url, so it aborts the action.
To fix:
Use the same URL as generated by Google Maps, but just append the following:
&wmode=transparent
Do you definitely have the &output=embed querystring parameter in the iframe source? If you don't include that then Google won't send the correct X-Frame-Options response headers and you get the error you've described.
Can you show the snippet of the MVC view where the map is being rendered?
I couldn't get any of the various suggestions around the web to work for embedding a google map link in an iframe.
I ended up using the google map API, generating the initial code by filling in the boxes at:
http://www.map-embed.com/
and modifying the resultant code to suit my purposes.
You could use the link above to gen the code for your own map, and then optionally use my code with the longitude and latitude produced by the above web site copied into my code. You can also insert your own html into "content" below, independent of what the above website produces.
<?php
// IE won't work with percentage height and FF won't work with em units.
// Simple code here assumes if browser isn't IE, then is FF;
// And I don't care about other browsers.
//
$height = "$browser" == 'ie' ? '25em' : '99%' ;
$width = "$browser" == 'ie' ? '99%' : '99%' ;
echo <<<XXXEODXXX
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div style="height:$height; width:$width; overflow:hidden;">
<div id="gmap_canvas" style="height:$height; width:$width;">
</div>
<style>
#gmap_canvas
img
{
max-width:none!important;
background:none!important
}
</style>
</div>
<script type="text/javascript">
google.maps.event.addDomListener ( window, 'load', init_map );
function init_map ()
{ var myOptions = { zoom:12, center:new google.maps.LatLng ( 41.1889495, -104.1781593 ), mapTypeId:google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map ( document.getElementById ( "gmap_canvas" ), myOptions );
marker = new google.maps.Marker ( {map: map, position: new google.maps.LatLng( 41.1889495, -104.1781593 ) } );
infowindow = new google.maps.InfoWindow ( { content:"<b>Biz Name</b><br/>Biz Street Address<br/>Biz City, State Zip<br/>Biz Phone" } );
google.maps.event.addListener ( marker, "click", function () { infowindow.open ( map, marker ); } );
infowindow.open ( map, marker );
}
</script>
XXXEODXXX;
?>
I'm trying to use the twitter API with library jsOAuth.
Full html
<div id="message">Loading..</div>
<script src="jsOAuth-1.3.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oauth = OAuth({
consumerKey: "-MY-KEY-",
consumerSecret: "MY-SECRET"
});
Updated
oauth.get("http://api.twitter.com/1/statuses/home_timeline.json?callback=?", success, failure);
function success(data){
$("#message").html("Sucess: " + data.text);
var timeline = jQuery.parseJSON(data.text);
console.log(timeline);
$.each(timeline, function (element){
console.log(element.text);
});
}
function failure(data) {
console.log("Throw rotten fruit, something failed");
$("#message").html("Error" );
}
</script>
Result
Full image
Questions
What am I doing wrong?
How can I use the twitter API in my PC.
If you can send me I would appreciate any examples.
Thank you all.
What am I doing wrong?
You are trying to make an AJAX request to Twitter. You are violating cross domain access policies - you cannot access data on the Twitter domain.
How can I use the Twitter API on my PC?
Pick one :
Use JSONP
Use a server-side proxy
Store your code on a file:// path, which removes the cross domain restrictions
Change your browser's security settings to allow this kind of access.
I have styled the unlikely ones in italic.
Also, as an experienced Twitter developer, I have one important note to make about your code: you're using Javascript to access the API. While using JS to do that isn't disallowed, using OAuth in javascript is very unsafe and your application will be blocked from the Twitter API if you used this code on a website.