Recently added gmail promo code to our emails and are now seeing clicks to schema.org. Has anyone else encountered this?
We had to paste the code into the body of the email as the annotations didn't work when they were in the same section as styles. This now makes the code visible in the plaintext email.
</head>
<body class="body" style="padding:0 !important; margin:0 auto
!important; display:block !important; min-width:100% !important;
width:100% !important; background:#ffffff; -webkit-text-size-
adjust:none;">
<script type="application/ld+json">
[{
"#context": "http://schema.org/",
"#type": "Organization",
"logo": "removed for example"
},{
"#context": "http://schema.org/",
"#type": "DiscountOffer",
"availabilityStarts": "2019-06-23T06:00:00-04:00"
},{
"#context": "http://schema.org/",
"#type": "PromotionCard"
}]
</script>
Would like to understand if these users are actually being directed to schema.org and if there's any way around it.
The user is not being redirected to schema.org at any point, this language is just so that Gmail understands what is going to be displayed in the enriched preview when your email populates in the highlighted bundle on the top of the promotions tab.
Please let me know if you have any questions
I suspect your ESP is converting those URLs into tracked hyperlinks, and then auto clickers are clicking the links - resulting in the data you are seeing. As your ESP is converting those into tracked hyperlinks, the Annotations will not be correctly formatted for Gmail.
Related
I'm making a personal homepage with Django. I am using django-markdownx for the content of article model. In addition, Katex has been implemented to the project with lines of JS in the Django template HTML to render Latex.
What I'm having a hard time is applying this Katex JS code to the Django admin page. How can I implement the JS code below to specific elements of the Django admin page? I don't want the script to be applied to all elements of the admin page, because editing text boxes should show raw Latex code, but only the preview part should render Latex parts as equations.
Here are django-markdownx, and Katex references:
https://neutronx.github.io/django-markdownx/
https://katex.org/docs/api.html
This is a JS code block that I'm using for Latex rendering.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css"
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
crossorigin="anonymous"
/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js"
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
crossorigin="anonymous"
></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js"
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "\\[", right: "\\]", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false }
]
});
});
</script>
I'm implementing Google strctured data using Ember and adding some dynamic values
<script type="application/ld+json">
[{
"#context": "{{my-ember-hbs}}",
...
The rendered html is:
<script type="application/ld+json">
[{
"#context": " // ember adds new line before and after
rendered-value-string
",
...
According the the Handlebars docs you can eliminate white space with a tilde ~.
<script type="application/ld+json">
[{
"#context": "{{~my-ember-hbs~}}",
...
{{my-ember-hbs}} may also have white space internally that you would need to account for.
I'm trying to add a custom media query to Interchange for retina laptops, but it doesn't seem to be picking up. I'm sure something is in the wrong place or there's wrong syntax somewhere. Any ideas?
HTML:
<div
class="responsive-bg"
data-interchange="
[http://brycekirk.com/man-mountain/small.jpg, small],
[http://brycekirk.com/man-mountain/medium.jpg, medium],
[http://brycekirk.com/man-mountain/large.jpg, large],
[http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
[http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>
CSS:
div.responsive-bg {height: 100vh; width: 100%; position: absolute; }
JS:
$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
Interchange Documentation
Codepen
It is NOT working because you are add custom query after the Foundation has initialize, you have to use Foundation reflow or you can set the media query before init code.
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
$(document).foundation();
The problem:
When I resize the window the images will only sometimes change. It's almost like they get stuck / the resize event is not being captured properly by foundation. If I start resizing the window like a rabid monkey it will occasionally swap the image. If I resize the window according to the media queries and then refresh the page the correct image renders. This appears to be a resize only issue.
Other details:
I have just a regular .html file (new site hosted from IIS on a separate machine) with a simple demo of Interchange image swapping.
If I manually call: $(document).foundation("interchange", "resize"); the image will swap correctly.
Foundation version 5.3.1
Testing in Chrome 36 and Firefox 31.
So far the only built in media query that works is (default). (medium), (large) etc. do nothing, I have to write out the actually query to get it to work (or manually create them using named_queries. This may be an unrelated problem but does seem strange to me.
<html>
<head>
<title>Interchange</title>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript' src='/foundation.js'></script>
<script type='text/javascript' src='/foundation.interchange.js'></script>
<link rel='stylesheet' href='/foundation.css' />
<link rel='stylesheet' href='/normalize.css' />
<script type='text/javascript'>
$(function () {
$(document).foundation();
$(document).on('replace', function (e, newVal) {
console.log(newVal);
});
// Adding this horrible hack will make it work 100% of the time.
// BUT THIS SHOULD NOT BE NECESSARY!
//$(window).resize(function(){
// $(document).foundation("interchange", "resize");
//})
});
</script>
</head>
<body>
<img data-interchange="[/images/space-small.jpg, (default)], [/images/space-medium.jpg, (only screen and (min-width: 641px))], [/images/space-large.jpg, (only screen and (min-width: 1000px))]">
</body>
</html>
I found the answer to my own question and it was indeed that odd media queries issue I described in the OP that lead me to the problem.
Foundation's javascript is dependent on the Foundation CSS existing before it initializes.
All I had to do was make sure the CSS link was above the script include and everything started working as expected.
Not sure this will help anyone, but I was getting the same issue but ONLY on Chrome. I added the foundation.min.css to my page like b1j suggested and voila! unfortunately though as I used the SASS version I couldn't just leave this included into the page as I would have double the amount of css included into my page. So I pasted the foundation.css contents into a style tag in the head of my document and deleted its contents bit by bit until I found the piece of css that fixed it. Here it is:
meta.foundation-mq-small {
font-family: "/only screen/";
width: 0em; }
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em; }
meta.foundation-mq-large {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em; }
meta.foundation-mq-xlarge {
font-family: "/only screen and (min-width:90.063em)/";
width: 90.063em; }
meta.foundation-mq-xxlarge {
font-family: "/only screen and (min-width:120.063em)/";
width: 120.063em; }
Not sure why this wasn't compiled into my CSS but I will look, but incase anyone needs a quick fix, this should do it!
I am trying to make the background transparent for some charts I have made with google charts. They work perfectly in everything except IE7 and 8, I get a white backgound.
I have tried every combination I can find for the color attribute to change it but nothing works.
The only thing left to try was a suggesting that someone made on here a few months ago for someone else with the same issue. Their suggestion was...
For a transparent background, use chf=bg,s,FFFFFF00
But I have no idea how to implement this?
chf=bg,s,FFFFFF00
is a code for the old Google Image Charts.
Those codes will only work with the non-SVG versions of charts. Google Image Charts have been deprecated (as you can see from their help pages), so unless you want to implement the old-style charts, you won't be able to implement the above code on your new, fancy, interactive SVG charts.
For the new fancy SVG charts, I have luck with
backgroundColor: "transparent"
Copy-paste this in to Google Playground to test:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
backgroundColor: "transparent"}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
This is just the standard bar chart example with two things added:
bgcolor="#E6E6FA" to the body element (make it blue so we can tell if transparent)
backgroundColor="transparent" to the options (make it transparent)
This works in FireFox. I don't know if it works in IE7 (no testing environment). Let us know if it works.
change as appropriate in the config file that the pie chart is located on.
I had this chart under a donate.php as example:
FROM
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
TO
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
that code let me have transparency when it was a white background! thank you.