I am currently running an ecommerce store. I want to use google actions & reviews in my emails so I can get reviews and offer one click actions from there. I am pretty novice, and have found this very useful. Can any body please help with how to get started? What are the requirements? Are there any email related requirements as SPF, DKIM , DMARC etc?
I would be very thankful for this support
I recently had similar questions myself because we wanted to provide shipment tracking information integrated in Google Now and jotted down the process I had to go through.
Since you want to offer the ability to post reviews your process will be a little different (as is described here: Review Action Email Markup - Google Developers) and needs a backend to handle HTTP POST requests.
Saxed from my blog about my journey to get tracking actions up and running:
Implement the Microdata schema in our email templates according to the Google Developer examples for the Parcel Delivery
action.
We went with the basic option to keep things simple. (See end results
further down this page)
Validate the data. Fail
validation.
Realize that the format in the examples was invalid (according to Google's own validator)
Tweak the tags and add one or two missing ones.
Validate again. Pass.
Verify that we have DKIM keys set up for the sender domain(s).
Send an email from our customer service email address to the same address to verify the button works (it wont work for other recipients
until Gmail whitelists you)
Send another email, to Google this time. This is part of the registration process.
Fill in the registration form
so that Google's people can validate your schema.
Receive reply from Google that they've forwarded my email to the right people.
???
It took 3 working days (Wednesday to Monday) and then I got an email from Google saying we were live.
We use Mandrill and their template feature. The template ended up with this metadata in the bottom, leaving the rest of the markup untouched:
<body>
{{-- lots of tables for layout --}}
<div itemscope itemtype="http://schema.org/ParcelDelivery">
<div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="{{ deliveryAddressStreet }}"/>
<meta itemprop="addressLocality" content="{{ deliveryAddressCity }}"/>
<meta itemprop="addressRegion" content="{{ deliveryAddressCountry }}"/>
<meta itemprop="addressCountry" content="{{ deliveryAddressCountry }}"/>
<meta itemprop="postalCode" content="{{ deliveryAddressZip }}"/>
</div>
<meta itemprop="expectedArrivalUntil" content="{{ expectedDelivery }}"/>
<div itemprop="carrier" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="{{ carrier }}"/>
</div>
{{#each products}}
<div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ description }}"/>
</div>
{{/each}}
<div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order">
<meta itemprop="orderNumber" content="{{ ordernumber }}"/>
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Our Store Name"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
<meta itemprop="trackingNumber" content="{{ shipmentTrackingNo }}"/>
<link itemprop="trackingUrl" href="{{ shipmentTrackingLink }}"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/TrackAction">
<link itemprop="target" href="{{ shipmentTrackingLink }}"/>
<link itemprop="url" href="{{ shipmentTrackingLink }}"/>
<meta itemprop="name" content="Track shipment"/>
</div>
</div>
</body>
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not work properly. I have tried to see the API of material design and tried to implement it but It did not work either.
Anyhelp would be really appreciated!
Thanks
<html>
<head>
<title>Parcel Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input
class="mdc-text-field__input mdc-text-field-helper-text--validation-msg"
type="email"
aria-controls="validation-msg"
required
/>
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<p
class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
role="alert"
>
Enter Valid Email
</p>
</form>
<script>
mdc.textField.MDCTextField.attachTo(
document.querySelector(".mdc-text-field")
);
</script>
</body>
</html>```
https://codesandbox.io/s/admiring-elion-kojst?file=/index.html
First off, jQuery wasn't needed. It didn't give any errors and it behaved the same, so I just removed it.
I found the manual here: https://material.io/develop/web/components/text-fields
If you look at the section titled:
Text field with helper text
Here you can seen the following example:
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input class="mdc-text-field__input" type="text"
aria-labelledby="my-label-id"
aria-controls="my-helper-id"
aria-describedby="my-helper-id">
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>
If you look carefully at the after the label, you will see some differences.
There is even more detailed information on how to use the helper text:
https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/
In the API section there is a class called mdc-text-field-helper-text--persistent which you have included. This will make the helper text permanently visible, so you don't want that.
Here is the block you should have instead of the p element after the label:
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
Enter Valid Email
</div>
</div>
PS: would be great if you could include a link to the example you were following next time.
When attempting to validate a schema.org/Article against Google's Structured Data Testing Tool, I noticed that it gives an error if you specify an SVG image:
The value provided for logo must be a valid URL.
Required by:
AMP Articles (what's this?)
When the URL is changed to have a .png (or .jpg, .bmp, .webp, etc.) extension, rather than .svg, it passes validation.
Here is the example I'm working with:
<div itemscope itemtype="http://schema.org/Article">
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="name" content="Example" />
<meta itemprop="url" content="http://example.com" />
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://example.com/logo.svg" />
<meta itemprop="width" content="600" />
<meta itemprop="height" content="60" />
</div>
</div>
<meta itemprop="dateModified" content="2016-01-05T12:43" />
<meta itemprop="datePublished" content="2016-01-05T12:43" />
<meta itemprop="headline" content="Example" />
<meta itemprop="name" content="Example" />
<meta itemprop="author" content="Example" />
<link itemprop="mainEntityOfPage" href="http://example.com/article" />
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://example.com/article.jpg" />
<meta itemprop="width" content="1200" />
<meta itemprop="height" content="800" />
</div>
</div>
Changing the other image's URL's extension will also produce the error.
I was unable to find any information on why it rejects SVGs in the Rich Snippets documentation or the AMP HTML spec. Does anyone have an explanation for this behavior?
Google has updated the documentation and specifically mentioned svg.
Logo image files should be raster (for example, .jpg, .png, .gif), not vector (for example, .svg), with no animation.
From one of the links you gave: https://developers.google.com/structured-data/rich-snippets/articles
Images should be in .jpg, .png, or. gif format.
Why? Who knows. Perhaps because SVGs still have some support issues in some browsers (particularly older ones).
Update: 2022 - after reading the google documentation, it seems they do now accept svgs. https://developers.google.com/search/docs/appearance/structured-data/logo#structured-data-type-definitions
I'm having issues getting my code: (http://codepen.io/hoschiCZ/pen/rOJmmr) to work.
<html>
<head>
<meta charset="utf-8">
<title>The title doesn't matter</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><center>MDL test</center></span>
</div>
</header>
<div class="mdl-grid" style="margin: 0px">
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
There is the main text/content located. This has to stay visible at all costs and screen sizes.
<br><small>Material Design Lite courtesy of Google, Inc.</small>
</div>
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
</div>
</div>
</body>
</html>
The intended columns layout & counts are as follows:
Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0
The outer numbers/cols are probably space for ads or just empty space, is just looks bad otherwise.
The problem is: it's not responsive, even after refreshing pages. I tried Chromium Linux mobile/tablet emulation and Nexus 5 Firefox & Chrome. Everywhere, the desktop version is used.
MDL requires you to include this in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Btw I didn't see it written in the Getting Started guide, maybe add it there?
Working CodePen
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
into
<head></head>
Your problem is that you haven't wrapped your .mdl-grid in a .mdl-layout__content
<div class="mdl-layout__content">
<div class="mdl-grid">row</div>
</div>
I made a jsfiddle example for you.
Just expand the window slider and you'll see what you are desiring.
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.