http://noblue.co.uk/blog/cloud-help-company-adapt-changing-working-environment/
The post is alwaying sharing wrong image to google plus. You can see the error in http://screencast.com/t/TBsgSGfopM
How we rectify this? I am using following code:
<div class="google_share">
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
It's not an problem by google, it's a problem by your side.
Google search for a image and found it: The popup background (http://noblue.co.uk/wp-content/uploads/2014/02/popup_case.png)
You must explicit add Meta informations in the header (Open-Graph) of your Site with following informations:
<meta property="og:image" content="..." />
Look at your source, you adding already a meta, duplicate it and change the duplicat extra for google:
<meta itemprop="image" content="http://noblue.co.uk/wp-content/uploads/2014/04/Advantages-of-cloud-computing-100x80.jpg">
EDIT:
Forgot 'em! You must add for Open Graph a additional Reference to your HTML-Tag:
<html prefix="og: http://ogp.me/ns#">
Related
So I am trying to setup a cookie consent banner and trigger Analytics when the user accept the service. This is my second attempt doing this(first time I failed miserable) and I am not sure if I am missing something, because in the research I did, looks pretty much straight forward but for some reason is not working for me.
This is the way my configuration looks on the GTM dashboard. So my Tag manager, where i have for now only two tags, one for the banner, that is a HTML custom Tag and the second that is for the Google Analytics.
This is the way my Custom HTML looks like.
When I try to run the GTM preview mode this is what I get. For me it's not clear, it says the Tag is triggered, however is not displayed on the preview mode, nor on the website
I also need to mention, that I placed the container on the website, and my code looks as follows(for now), also this is a SPA I also don't know if can be something related to that:
<!DOCTYPE html>
<html lang="">
<head>
<script type="text/javascript">
// create dataLayer
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
// set „denied" as default for both ad and analytics storage,
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
wait_for_update: 2000 // milliseconds to wait for update
});
// Enable ads data redaction by default [optional]
gtag("set", "ads_data_redaction", true);
</script>
<!-- Google Tag Manager -->
<script type="text/javascript">(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I am not sure if I need to provide another type of information, so please let me know.
** EDIT **
Below the custom HTML Tag script, where the first script is just to include the main SDK script.
<script>
var cookie = document.createElement("script");
cookie.setAttribute(
"src",
"https://www.mywebsite.com/redesign-scripts/vendor/udg-uc-sdk.min.js"
);
cookie.setAttribute("id", "xxxxxxxx");
document.head.appendChild(cookie);
</script>
<script>
var GlobalConsent = GlobalConsent || {};
//Activate new modal style
GlobalConsent.NewModalSDK = true;
//Set language
GlobalConsent.Language = 'en';
//Set privacy shield content
window.ucPrivacyShield = {
bgimage: 'https://linktoimage.com/image.jpg',
consentunavailable: {
text: 'Die zur Anzeige notwendigen Inhalte konnten nicht geladen werden. Falls Sie einen AdBlocker verwenden, überprüfen Sie bitte dessen Einstellungen.'
},
consentservice: {
headline: 'Hinweis zur Datenverarbeitung',
text: 'Auf unserer Website stellen wir Inhalte von ###SERVICE### bereit. Um diese Inhalte zu sehen, müssen Sie der Datenverarbeitung durch ###SERVICE### zustimmen.',
buttons: {
consent: {
label: 'Zustimmmen'
},
privacy: {
label: 'Hinweise zum Datenschutz',
link: 'https://www.mywebsite.com/de/privacy/'
}
}
}
};
//Wait for UC SDK loading
window.addEventListener('ucReady', function (e) {
//Check Youtube & Vimeo iFrame consent
window.ucPrivacyShield.checkConsent({
mapContainer: document.getElementById('youtube-vimeo-iframe'),
processorId: ['_xxxxx', '-xxxxx'],
timeoutVar: {},
callbacks: {
success: function () {
var iFrame = document.getElementById('youtube-vimeo-iframe').getElementsByTagName('iframe')[0];
iFrame.src = iFrame.dataset.src;
},
p: undefined
}
});
}, false);
</script>
*U P D A T E
I was wondering if someone else have any idea about this, I still don't manage to solve the issue, And I was wondering if it related that the app is rendered client site, and someone when the google tag is trying to append the DOM it is still not there, I tried by wrapping the append inside a "onload" function, but did not worked as well
Did you check localStorage and cookies to ensure, that you don't have preexisting settings.
The banner is only displayed, when there are no preexisting settings in your web storage. Since there are "consents-initialized" dataLayer events displayed in your screenshot, this could be possible.
I have a Google+ and Facebook Like button on my page. i have the required scripts from them and setting the data attribute dynamically. BUT when i click on share button OR Like button it opens up with a random image and title. I have the meta tags for them to recognize Title, Image and description i would like to use BUT somehow they are not picking up meta tags.
Here is the Errors from Facebook Developer Debug Tool
fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.
og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
Rendered Meta Tags in HTML
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
itemscope itemtype="http://schema.org/Product">
<meta content="No appointment necessary. We hear you coming" name="og:title">
<meta content="http://www.mysite.com" name="og:site_name">
<meta content="blog" name="og:type">
<meta content="http://www.mysite.com/entries/viewentry.aspx" name="og:url">
<meta content="http://static.mysite.com/Images/imag21.jpg" name="og:image">
<meta content="447438772019226" name="fb:app_id">
<meta content="Temp title and some descriptions" name="description">
Facebook Scripts
<div class="facebookShare">
<div class="fb-like" data-font="verdana" data-href=
'<%= currentPageURL.Value %>' data-layout="box_count" data-send="true"
data-show-faces="true" data-width="500"></div>
</div>
// currentPageURL is a hidden field which sets the URL fine.
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Google+ Share Button Script
<div class="googlePlusShare col span_1_of_12">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation=
"vertical-bubble" data-height="60" data-href='<%= currentPageURL.Value %>'</div>
</div>
(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);
})();
Rendered HTML for Both
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget"
data-font="verdana" data-href="http://www.mysite.com/viewentry.aspx?entryId=6"
data-layout="box_count" data-send="false" data-show-faces="true"
data-width="500">
</div>
// Google+ replaces the entire html and my data-href attribute as well and put some code in there in which i dont see my current page URL. Atleast i can see that in facebook tags
However, BOTH when clicked does not pull my meta tags information. Please help.
Try loading your URL in: http://www.google.com/webmasters/tools/richsnippets This will tell you if your URL is visible to Google. It will also tell you if there are any errors in your markup.
I was trying to include the Google Plus One button in a Meteor app for collaborative sketching and I noticed that the script tags inside templates are not executed.
<template name="gplus">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-href="{{url}}"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
console.log("Google Plus button");
(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>
</template>
I got the button to work by moving the script to a separate JavaScript file, but I still wonder why the inline-script didn't work.
I see the script tag on the console, but the script itself doesn't run. How does Meteor do this?
Meteor just inserts the contents of the gplus template into the DOM, so of course nothing happens because there is no script execution when elements are added to the DOM.
To fix this you can create a .js file and put it in the client folder, which Meteor will automatically include and execute for you (as well as minify in production).
Here is what I do to load the Google +1 Button in my application:
1. Add the JS library between the <head> tag of your application.
<head>
<!-- Load JS Library -->
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
</head>
2. Insert the +1 Button.
<template name="myTemplate">
<div data-href="https://hackisition.com/" data-size="medium" class="g-plusone"></div>
</template>
3. Render the Button.
Template.myTemplate.rendered = function() {
return gapi.plusone.go();
};
Where should I place Google analytics code in my master page?
right before </body> tag to prevent slowing download js scripts from blocking page content.
More details: http://developer.yahoo.com/performance/rules.html#js_bottom
UPDATE (2018-10-22):
Just after the <head> tag:
https://support.google.com/analytics/answer/1008080?hl=en
ORIGINAL ANSWER:
Just before the </head> tag.
https://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080
If you prefer to put the Analytics snippet at the bottom of the page, you should know that you don't have to put the whole snippet at the bottom. You can still keep most of the benefits of asynchronous loading by splitting the snippet in half—keep the first half at the top of the page and move the rest to the bottom. Because the first part of the tracking snippet has little to no effect on page rendering, you can leave that part at the top and put the part of the snippet that inserts ga.js at the bottom.
A page with the asynchronous snippet split in half might look like this:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (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>
</body>
</html>
Both pieces of code need to be wrapped in their own script tags, but only the last six lines of the original asynchronous snippet need to be moved to the bottom. All the lines that push methods onto _gaq can stay at the top.
Using a KmlLayer object within the Google Maps API, is it possible to allow a user to adjust the transparency of the overlay.png features, referenced by some .kml file?
To the best of my knowledge it is not possible via standard google api but you can do this using jquery or some other library. KML images are just part of the DOM so if you can find the nodes you can manipulate their properties. Here is an example using jquery:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
$("#map_canvas").find("img").css("opacity","0.4")
})
})
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px;height: 600px;"></div>
<input type="button" value="dim the lights" class="b_opacity">
</body>
</html>
NOTE: please bear in mind that the css property opacity does not work in IE you have to use filter:alpha(opacity=40) for IE or you can use jQuery .fade() method.
This style is working for me:
#map > div > div > div > div > div:nth-child(2) img[draggable="false"] {
opacity: 0.4;
}