We have a Microdata Parcel Delivery markup code for our shipping confirmation email. Everything works great, but something strange happens.
For both the trackingUrl and the potentialAction url, we put our Narvar link: this is a service we use, that provides users with an intermediary page, where they see the status of their shipping and some additional info. If they want, on that page they can click on their UPS/FedEx/USPS link and go to their websites for more information.
In spite of this, when someone receives the email with the Markup code, right away the Narvar url is behind the button and call to action links. Then, after a few seconds, the button changes and the link "behind" it becomes the UPS/FedEx/USPS one.
The weird thing is that the UPS/FedEx/USPS link never appear in the Markup code, noyl the Narvar one does.
Has anyone experienced this and knows if this is expected?
Maybe the code automatically bypasses intermediary pages, recognizing the "final destination" and use that instead?
Can something be done to avoid this?
Thanks!
UPDATE: added code and screenshots
https://snag.gy/8ZBax6.jpg shows the email as soon as it hits the inbox: clicking in the link brings you to the Narvar web page
https://snag.gy/7tOD6l.jpg shows the email a few seconds after it got to the inbox: the link will bring you directly to the USPS website, no signs of Narvar
Here is the code we use:
<div itemscope itemtype="http://schema.org/ParcelDelivery">
<div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="Stefano Pistillo"/>
<meta itemprop="streetAddress" content="63 Bovet Road Suite 224"/>
<meta itemprop="addressLocality" content="San Mateo"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94402"/>
</div>
<meta itemprop="expectedArrivalUntil" content="07/05/2018"/>
<div itemprop="carrier" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="USPS PRIORITY MAIL NO CHARGE"/>
</div>
<div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="W's Fitz Roy Down Jkt"/>
<link itemprop="url" href="http://www.patagonia.com/us/product/?p=84596-1-NVYB"/>
<link itemprop="image" href="http://www.patagonia.com/dis/dw/image/v2/ABBM_PRD/on/demandware.static/-/Sites-patagonia-master/default/images/hi-res/84596_NVYB.jpg?sw=100&sh=100&sm=fit&sfrm=png"/>
<meta itemprop="sku" content="84596"/>
<meta itemprop="color" content="NVYB"/>
</div>
<meta itemprop="trackingNumber" content="XXXXXXXXXX"/>
<link itemprop="trackingUrl" href="http://patagonia.narvar.com/patagonia/tracking/USPS?service=PP&ozip=94402&dzip=&tracking_numbers=XXXXXXXXXX"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/TrackAction">
<link itemprop="url" href="http://patagonia.narvar.com/patagonia/tracking/USPS?service=PP&ozip=94402&dzip=&tracking_numbers=XXXXXXXXXX"/>
</div>
<div itemprop="hasDeliveryMethod" itemscope itemtype="http://schema.org/ParcelService">
<meta itemprop="name" content="http://schema.org/ParcelService"/>
</div>
<div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order">
<meta itemprop="orderNumber" content="12345678"/>
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Patagonia.com"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
</div>
Related
Hi I'm trying to send emails with gmail markup. The markup type I am using is Parcel delivery. Everything went well with the sample code. But it confused me when I am trying to change the title part of the highlights. The title part seems always showing whatever in "Items" like the screenshot below.
Markup code I am using.
<div itemscope itemtype="http://schema.org/ParcelDelivery">
<div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="John Frank"/>
<meta itemprop="streetAddress" content="24 Willie Mays Plaza"/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94107"/>
</div>
<div itemprop="originAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="John Frank"/>
<meta itemprop="streetAddress" content="25 Willie Mays Plaza"/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94107"/>
</div>
<meta itemprop="expectedArrivalFrom" content="2027-03-10T12:00:00-08:00"/>
<meta itemprop="expectedArrivalUntil" content="2027-03-12T12:00:00-08:00"/>
<div itemprop="carrier" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="FedEx"/>
<link itemprop="url" href="http://fedex.com/"/>
</div>
<div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Item Shipped.Name"/>
<link itemprop="url" href="http://apple.com/ipad32gb"/>
<link itemprop="image" href="http://apple.com/images/ipad32gb.jpg"/>
<meta itemprop="sku" content="B00DR0PDNE"/>
<meta itemprop="description" content="iPod Mini 32Gb White"/>
<div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<meta itemprop="name" content="Apple"/>
</div>
<meta itemprop="color" content="white"/>
</div>
<meta itemprop="trackingNumber" content="3453291231"/>
<link itemprop="trackingUrl" href="http://fedex.com/track/3453291231"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/TrackAction">
<link itemprop="url" href="http://fedex.com/track/3453291231"/>
</div>
<div itemprop="hasDeliveryMethod" itemscope itemtype="http://schema.org/ParcelService">
<meta itemprop="name" content="http://schema.org/ParcelService"/>
</div>
<div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order">
<meta itemprop="orderNumber" content="176057"/>
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Merchant Name"/>
<link itemprop="sameAs" href="http://www.freebase.com/m/0fhkx"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
</div>
Current highlights screenshot:
When I trying to have the title part of highlights show as the UPS notification email in attached, which is different from what's in "Items", I don't know where to change. I've read through the parcel delivery reference here but didn't find anything about it. I know where to change the "Items", "expected delivery date", "Merchant name" in highlights, but I can't find how to change the content of the title like the circled part like in UPS email. Please help. Many thanks!
UPS email screenshot:
I create an email that with Microdata for EventReservation. When I receive mail Gmail recognizes properly the information about the event date, place, etc. But I added a custom action to go a web page that Gmail don't recognized. I this action attribute of Event still supported by Gmail. Microdata looks like this:
<div itemscope itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationNumber" content="1000"/>
<link itemprop="reservationStatus" href="http://schema.org/ReservationConfirmed">
<link itemprop="modifyReservationUrl" href="https://www.mywebsite.com/1000">
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Name"/>
<div itemprop="action" itemscope itemtype="http://schema.org/Action">
<meta itemprop="name" content="Go to my web site"/>
<link itemprop="url" href="https://www.mywebsite.com/action"/>
</div>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://schema.org/Event">
<meta itemprop="name" content="Event name"/>
<meta itemprop="startDate" content="2020-09-01T18:00:00+0000"/>
<meta itemprop="endDate" content="2020-09-01T19:00:00+0000"/>
<div itemprop="performer" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Event Performer Name}}"/>
</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<meta itemprop="name" content="Address name"/>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Address">
<meta itemprop="addressLocality" content="Locality">
<meta itemprop="addressRegion" content="Region"/>
<meta itemprop="postalCode" content="PostCode">
<meta itemprop="addressCountry" content="Country">
</div>
</div>
</div>
</div>
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
Using Google Script (microdata format) and my own GMail account, I am sending a flight reservation schema, but the Flight card isn't showing in Google Now.
The corresponding Weather forecast cards (departure/arrival) are popping up on Google Now for android phone, but not the Flight card.
Here is the code I have used...
<div style='display:none;' itemscope itemtype='http://schema.org/ReservationPackage'>
<div itemscope itemtype="http://schema.org/FlightReservation">
<meta itemprop="reservationNumber" content="FF6600"/>
<link itemprop="reservationStatus" href="http://schema.org/Confirmed"/>
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Saravanan Padmanabhan"/>
<meta itemprop="email" content="eva#mail.com"/>
</div>
<div itemprop="bookingAgent" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Cheap Air Travel"/>
<link itemprop="url" href="http://cheapair.com/"/>
</div>
<meta itemprop="bookingTime" content="2013-01-14T13:05:00-05:00"/>
<meta itemprop="modifiedTime" content="2013-03-14T13:05:00-05:00"/>
<div itemprop="programMembership" itemscope itemtype="http://schema.org/ProgramMembership">
<meta itemprop="memberNumber" content="4BY123111"/>
<meta itemprop="program" content="StarAlliance"/>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://schema.org/Flight">
<meta itemprop="flightNumber" content="110"/>
<div itemprop="airline" itemscope itemtype="http://schema.org/Airline">
<meta itemprop="name" content="United"/>
<meta itemprop="iataCode" content="UA"/>
</div>
<div itemprop="operatedBy" itemscope itemtype="http://schema.org/Airline">
<meta itemprop="name" content="Continental Airlines"/>
<meta itemprop="iataCode" content="CO"/>
</div>
<div itemprop="departureAirport" itemscope itemtype="http://schema.org/Airport">
<meta itemprop="name" content="San Francisco Airport"/>
<meta itemprop="iataCode" content="SFO"/>
</div>
<meta itemprop="departureTime" content="2013-06-19T20:15:00-08:00"/>
<meta itemprop="departureTerminal" content="B"/>
<div itemprop="arrivalAirport" itemscope itemtype="http://schema.org/Airport">
<meta itemprop="name" content="John F. Kennedy International Airport"/>
<meta itemprop="iataCode" content="JFK"/>
</div>
<meta itemprop="arrivalTime" content="2013-06-20T06:30:00-05:00"/>
<meta itemprop="arrivalTerminal" content="B"/>
</div>
<meta itemprop="ticketNumber" content="FF6600"/>
<meta itemprop="airplaneSeat" content="9A"/>
<div itemprop="airplaneSeatClass" itemscope itemtype="http://schema.org/AirplaneSeatClass">
<meta itemprop="name" content="Business"/>
</div>
<meta itemprop="boardingGroup" content="B"/>
</div>
</div>
Basically it is the same as in the Google example, except I have changed the date and location, just in case Google Now would be based on those.
My Questions:
Should I be seeing a Flight card or any other cards in the Android phone apart from Weather forecast.
On the iPhone (4s and 5) and the iPad, no new cards appear, despite having the same schema embedded in the emails, and using the same GMail login.
For reference, I have enabled the flight card in these devices.
Could someone please explain where the problem lies.
Did you see this? you need to supply JSON.
https://developers.google.com/gmail/schemas/reference/flight-reservation
Also Google schema validator is giving an error "Unknown type AirplaneSeatClass"
https://developers.google.com/gmail/schemas/testing-your-schema#schema_validator
After removing the AirplaneSeatClass meta i was able to validate the email.
Using google sccript + my own gmail account , I am sending a flight reservation schema ( microdata format ).
The corresponding weather forecast cards (departure/arrival) are poping up on google now, but so far, no boarding pass has been shown.
Any idéal why ?
Please note I did not include any action as I understand those are not supported yet.
Here is the templace I have used.
Basically it is almost the same as in the google example, except I have changed date and location just in case google now would be based on those.
<div itemscope itemtype="http://schema.org/FlightReservation">
<meta itemprop="reservationNumber" content="RXJ34P"/>
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Renaud Huillet"/>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://schema.org/Flight">
<meta itemprop="flightNumber" content="110"/>
<div itemprop="airline" itemscope itemtype="http://schema.org/Airline">
<meta itemprop="name" content="United"/>
<meta itemprop="iataCode" content="UA"/>
</div>
<div itemprop="departureAirport" itemscope itemtype="http://schema.org/Airport">
<meta itemprop="name" content="Nice Cote d Azur"/>
<meta itemprop="iataCode" content="NCE"/>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="addressLocality" content="Nice"/>
</div>
</div>
<meta itemprop="departureTime" content="2013-05-27T11:15:00+01:00"/>
<div itemprop="arrivalAirport" itemscope itemtype="http://schema.org/Airport">
<meta itemprop="name" content="John F. Kennedy International Airport"/>
<meta itemprop="iataCode" content="JFK"/>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="addressLocality" content="New York"/>
</div>
</div>
<meta itemprop="arrivalTime" content="2017-05-27T19:30:00-05:00"/>
</div>
<meta itemprop="airplaneSeat" content="9A"/>
<div itemprop="airplaneSeatClass" itemscope itemtype="http://schema.org/AirplaneSeatClass">
<meta itemprop="name" content="Business"/>
</div>
<meta itemprop="ticketNumber" content="ABC1234"/>
</div>
The email markup that you're using is the correct way to send the confirmation email for a flight reservation. However, once the passenger has checked in and a boarding pass has been issued, another email needs to be sent with the boarding pass information in order to trigger a card in Google Now.
As long as the confirmation numbers and passenger details match, the two emails will be merged into one flight reservation with a boarding pass. In order for that boarding pass to show up in Google Now you will need to make sure all the required properties are filled in and provide a URL to a barcode/qrcode image using the ticketToken property. Also make sure that the departureTime is sometime within the next 6 hours or change the time on your device to within 6 hours of the specified departureTime.