AMP Conf 2019 – Day 2 Livestream
Articles,  Blog

AMP Conf 2019 – Day 2 Livestream


test test test test Hello, everyone. Please take
your seats as our program will begin in five minutes. Good morning, everyone. As a reminder there will be some
sessions in Japanese throughout the day, as well as many in English. If
you need a translation headset, don’t forget and grab one just
outside the room. Hello, everyone, please take
your seats as our program is about to
begin. YUSUKE USTUNOMIYA: Welcome back
to AMPConf. CRYSTAL LAMBERT: Day two!
YUSUKE USTUNOMIYA: How was everyone last night? Everyone had fun at the
after-party? We had a lot of good sake and
food. It was a wonderful DJ and I
think everybody had a fun time. Great DJ, awesome food and
drinks. CRYSTAL LAMBERT: The DJ was
fabulous, the food was delicious, the
drinks were many but my favorite part was getting a chance to
talk to people in the audience. I got to meet people from all
over the world which is one of my most favorite parts about
AMP. If we have not had a chance to talk yet, please, come up and say hi
if you see me out and about. YUSUKE USTUNOMIYA: I was not
able to drink any sake last night but
tonight I am going to go all out that is
where we are today. I am looking forward to EMCEEing
you today. It is your first time in Japan?
CRYSTAL LAMBERT: That is how. YUSUKE USTUNOMIYA: How would you
describe Tokyo in a single word? CRYSTAL LAMBERT: That is a tough
question. I had expectations coming into Japan before. I have
heard of the country before but I would say overall it has been
surprising. Some of those expectations have
been met and some more exceeded and some flipped over and upside down. Wondering through the streets of
Tokyo, you will turn the corner and all of a sudden it is a new city.
Definitely surprising. YUSUKE USTUNOMIYA: I think it is
great you had a great adventure similar question to the audience.
CRYSTAL LAMBERT: We asked if you could describe AMP with a single
world what would it be. Thank you everyone who submitted. We
are fast but it was nice to see flash, and awesome, and
exciting. Which is this one in Japanese?
YUSUKE USTUNOMIYA: It is awesome. It is really great. I am seeing AMP is AMP. That is an accurate description
of AMP. CRYSTAL LAMBERT: We are breaking
news and that is just launched yesterday under our documentation is we
have development courses. There is three of them available now and these teach people who don’t
know anything about JavaScript how to create websites. They
show experienced developers how to build things with AMP. The
first course is now available on YouTube. There is other courses
coming soon. I highly encourage all of you to check it out. If
you know anybody who is dying to get started with web
development, this is a great place to send them. They don’t
have to know anything at all and they can start building websites
with AMP right now today. Big round of applause for Ben for getting that in time for
AMPConf. YUSUKE USTUNOMIYA: After AMPConf
there is a lot of material you can try out so it will be very
fun when you get back from this AMPConf. And yesterday, it is a repeat
but sake was good and DJ was wonderful and I think some
people may have forgotten what was talked about. We had great food and great DJ I
am worried people might be
forgetting about the content of day one.
CRYSTAL LAMBERT: I saw the sake getting passed out and they were
filled pretty high. Who still has a good memory? No one. Great thing we put this
together. YUSUKE USTUNOMIYA: We will do
some quiz. We want to see whether you remember what we announced in day one. We
want to check if you remember the announcement we did
yesterday. So the first question will be
what does amp-script use in the DOM API in
the worker thread? Amp-script, which DOM API do we
immolate that? What is the library that they
use? A virtual DOM. B; worker DOM. C; DOM containing list. And D; shadow DOM. Who thinks it is A, virtual DOM? Who thinks it is B worker DOM?
Who thinks it is C? DOM change list. Who thinks it is D shadow DOM.
You got it right. The answer is worker DOM. To add on, change list is also
interesting. It seems like we have a web format specification
within the worker thread, you just list up the worker
change points and then to execute that
is the spec that is being prepared. In Chris’ talk, there
is still compatibility in that. Shadow DOM in order to create
the web component is the technology that will be
necessary. You need to have CSS that will
be capsulized and that kind of
usage. This is the slide we saw
yesterday with the amp-script and the worker
DOM are communicating to make something complicated something
simple. A worker DOM is not only for —
with the observer main threat, if you want to operate, then you will have
another option as a worker DOM going
forward. CRYSTAL LAMBERT: I think we are
ready for the next one. Yesterday we had a really great
talk on all the new features coming to
AMP Stories but what was not introduced as a new option that
is going to be supported in AMP Stories yesterday? Was it going to be A; AMP
sidebar. B, attachments. C, embed beds, or D is it VR
components? Hands for A? What about B? Anybody for C? And
finally D? Oh, man, you were all here. The answer was D, VR SPOENT
components. When AMP Stories started, it was this Tappable
experience but now they are adding so many features it is
really a great way to immerse readers and
users into this fuel experience. experience but now they are
adding so many features it is really a great way to immerse
readers and users into this fuel experience. There is so many exciting things
coming and I can’t wait to see what people will do with these
new experiences and options the team has been working so hard to make this available.
YUSUKE USTUNOMIYA: There is a lot of people woo want to do AMP
Stories on major media and e-commerce sites and operators want to do it right
away is what has been discussed. It might be good to take a look
at the YouTube again. What was the name we let use AMP
components without the Runtime? I know this was announced in the
very last session of day one and day one was a long day. I am kind of, you know, worried
that people might have been sleeping.
CRYSTAL LAMBERT: I don’t know. This audience seems on top of
their game. YUSUKE USTUNOMIYA: I know right. So, A; lunchbox AMP. B; AMP duba. C, Bento AMP. And D.
CRYSTAL LAMBERT: This question is making me hungry.
YUSUKE USTUNOMIYA: Exactly. It is 9:00 A.M. in the morning. Who
thinks it is A? No one. B? C? Ah! D?
CRYSTAL LAMBERT: This is a sharp audience. YUSUKE USTUNOMIYA: So, yeah, the
answer would be C. Thank you so much for my
Indiaian colleagues to provide the lunch
box translation for hindi and
Korean. Up until now, AMP component was basically lifecycle was
maintaining Runtime but now we have not
recommended using as individual, however, we will have an
announcement yesterday to do that. What I remember last year in
AMPConf 2018 we had a Q&A session and within that session, one person was
saying to Malte why AMP can’t we be used
in web competent. I thought exactly that as well and I am great we had this progress like
this. Who went to AMPConf ’18 in
Amsterdam? I remember in a Q&A session, a person was asking why can’t we use —
we were seeing progress here. It is a concept right now. But it
is progress. CRYSTAL LAMBERT: And Bento AMP
is such a great example of when you ask from AMP you shall
receive. Those community contributions, those community
asks, those feature requests, and those issue filing really
are making a difference on the future of
AMP. YUSUKE USTUNOMIYA: Yes, the
feedback loop is very important. Who uses Bento AMP, you can create more
options for Bento AMP — there will be
new options be coming out in the future the more you use Bento
AMP. Now, quickly let’s run through
the schedule today. CRYSTAL LAMBERT: We will be
providing content. Obviously you are excited to be
here. You got here half an hour
earlier than yesterday and are in your seats.
One quick difference I would like to point out is the panel is taking
place at noon right before lunch
instead of in the afternoon. YUSUKE USTUNOMIYA: This
afternoon, AMP for email and I think everybody
is interested in that. We have a Signed Exchange talk. Then we have WordPress session. Then analytics session which is
of great interest to all of you, I
believe. Today the Google panel will be
— CRYSTAL LAMBERT: Sli.do with the
event code AMPConf. We are really enjoying seeing the
questions roll in. Please keep it up.
YUSUKE USTUNOMIYA: Today we have a Google leadership panel at noon. So Google thinks of AMP like how
do they plan to use AMP and other products will be the topic of the panel
session. Monisha is one of the speakers. He is a lead in Asia for product
development. Then we have the site leader for
Google Japan. Dionis the web div leader. Then we have Malte on top of
that. The very first session will be
the day two keynote. Please welcome Vamsee and Kat. CRYSTAL LAMBERT: Let’s go. [Playing Ukelele]
KATHARINA FAMILIA ALMONTE: Good morning. I am a blogger and I write about
vintage toothpastes but my site took longer loading than it takes you
to brush your teeth. Then AMP came around and now my site is super-fast, users are happier
and I make more money off of ads. [Applause] VAMSEE JASTI: That was amazing
my name is Vamsee and I am a product manager on the AMP Core
team. When AMP first started we designed it on top of user-first principles
and advertising no different. Quick show of hands, how many of
you are happy with the current state
of advertising? Not me. There are many classes of problems but
we think we can solve two of them pretty easily with AMP. The
first one is run performance and the second one is security.
Today we will talk about three separate products to address
those issues but first let’s level set what some of the challenges we see with the
display ads ecosystem. This is an ad made on a copper
printing plate and an owner hung it on top of their store and had
people come visit their store. It is a very simple model. It
worked. Advertising on the web has become completely different,
though. It comes with its own set of challenges. The number of value adding
marketing technologies has exploded from
spam detection to view buddy to ad servers to measurement.
Advertising on the open web brings transparency and
efficiency but there is a problem. As the number of people increase
in the ecosystem and delivering the
campaign, the transparency decreases. It is hard to
pinpoint who is writing efficient code or who is causing
Malware. This is a study conducted by the “New York
Times” where they measured how much it cost a single user on per
page data load and you will notice that
the editorial content is 1/4 of that
of advertising content. Here is a different type of
problem. Ads do this thing called water falling where the
initial ad is able to request sort of infinite number of more
third-parties into the ad and the problem is as a result, the ad
is only strong as the weakest link in
the entire water fall chain. You will see things like on the left where you are seeing popups or
on the right having crypto minors mine
your CPU off your devices without your knowledge by ads. So to solve these problems we
created AMPHTML ads. These are display ads written in
AMP. Not only do they load faster but they are also more
secure. Let’s see why. Since AMP is an open source project and
framework it is perfectly clear who wrote the code and how
performing it. It is easy to determine the performance of the
code by going in there and looking at it. The nice thing
about AMP is that it won’t even get to that point because if
somebody is trying to commit a piece of code that is non
performing chances are it will not be merged into the
repo. Second all of the code in
AMPHTML ad is declarative which means one
can’t dynamically load more code on top of the existing code so no mother — water falling. Once the ad is
validated that is what will run in the browser. There is not
going to be pore third parties calling out and fetching and we
won’t have the problem we had with water falling. AMP is extendible meaning A; you
can build core building blocks of
advertising technology within AMP and on top of that third
parties can build their own implementations or
third-party support within those third-party
building blocks. A good example is Mote. One of the biggest vendors in
the industry. They use AMP analytics and built
the mote extension on top of it. As you will see, Google already
serves a number of AMPHTML ads in the
ecosystem already. All of this functionality, which is highly
performant, is wrapped into a single library so the chances
are, the ad whenever it serves to a web page is highly cast in
the browser. So, for example, if I am a user visiting site A and end up
seeing an AMPHTML ad and when I go to site B all of the core
infrastructure and Runtime is already downloaded for me so I
am not essentially downloading more bytes. And finally, AMPHTML ads are run
on both AMP pages, of course, and non-AMP pages, and mobile app support is
coming in summer. So far, I have talked about all
the wonderful way AMPHTML ads are
great from a user standpoint but have to make business sense for
advertisers and publishers to adopt them.
Here is the punch line for why whole talk and that is speed
directly translates to revenue. This is true in general. For example, when you go to a
website if doesn’t load chances are you will bounce. For ads it’s true because
publishers lose impressions when ads are slow and for advertisers it ends up
growing lower quick rates and visibility because chances are
you cannot click on an ad you don’t view. Let look at a bunch of real
world examples of how AMPHTML ads
drive revenue. I would like to invite Ajay Shukla who is going to talk in
Japanese. — Takahiro Yasuda who is going
to talk in Japanese. TAKAHIRO YASUDA: My name is
Takahiro Yasuda and I am going to be talk
about the performance of AMPHTML ads. I am from So-net media group. It is part of Sony in Japan’s
marketing company. RTB, add buying platform, is the
business buying platform, is the business that we do. We have the ad on frame movie
box in Japan and distrubutteing the ads. Our service name is called
logicad. And concentrated on Google ad
manager I have supplied a side platform is
what we are connected to. The amount of ads that we handle
one month is over 300 billion and we distribute to various types of
devices. The format we use is AMPHTML ad,
menu ad, video ad. It is HTML ad we like to
introduce you to the performance of that. On the mobile page, we have a
normal HTML page written in normal HTML and an AMP page that is written in AMP
as well. In the same way, we have an HTML
add written in HTML and AMP ads
written in AMP. We work with Google engineers in
2007 AMP page will be able to
distribute AMP ads. So they sent to a team with an
HTML ad, AMP I also have a function that
introduces AMP ads. We like the results in how the
AMPHTML ad will look like. We have HTML and AMPHTML ads
distributed and we will see what we want to compare and look at and
compare with that. We can see that more than a
thousand different ads, campaigns, we see
that they are not different from each other using two different
technologies. We tested out to see what they would look like and the result is CTR
for AMP was plus 12% and CPA was minus
11%. That is the result we got on the
test. And this was a big improvement
on the effect. Next a normal HTML page, if you
take that, and if you put a HTML ad
and an AMP ad on a normal HTML page and compare the results, we got better
results than last time. The CTR was improved by 33% and
the CPA reduced by 27%. And this was also one of the
bigger improvements and the time until
ad is displayed when we measure that
time, the AMPHTML ad would get displayed
28% faster. So, by running ads at higher
speeds, the ads were more impactful. So, about these figures, are
also shown on So-nets’ home page so please
have a look over there. And with regard to AMP ads,
these are the positive points of using
AMPHTML ads. So, as you can see better ad performance, we got good results
so we are going to use AMPHTML ads as
much as possible in our ad works today. And a second point is we are
able to implement and have there same impact as it is written
with JavaScript. So this type of dynamic creator
is realized with AMP and we are able to do that securely. And a third point is measuring viewability and so you could do
it easier than a normal standard
HTML when you want to measure viewability
and viewability is something that is important in
transparency. These type of information is
shared with the ad placers. We try to push the AMP ad
technology to our clients as much as possible.
Thank you very much. VAMSEE JASTI: Let’s switch to
examples of how Google uses AMPHTML ads. When ads serve, they serve
across IFrames. Turns out crossing iFrames are
expensive to render. In AMP’s case, since it is fully
validated there is no custom JavaScript and it can serve into friendly
iFrames. This speeds up the ad and drives
the AMPHTML ad version to be much faster.
Remember how I said speed translates to revenue? In Google’s case, this results
in 1% higher impressions for
publishers. This is all across the web right
now. This means publishers got higher pay outs without changes
in the visual. Advertisers saw increase in
click rate of 3.83% at the CTR. Recently, Google ads mandated
new advertisers coming on board only use AMPHTML adds. This is to prevent abuse from
advertisers creating fake accounts and spreading Malware. For established advertisers,
Google as began converting ads to AMPHTML
ads. Delivering better size and
performance leads to better overall revenue
because speeds translates to revenue. I will probably repeat that five
more times. Ads were 17% smaller and at the
90th percentile adds were more than 50% smaller. As a result of many of the
efforts across Google similar to these ones, we are seeing Google
now serves 12% of all ads served to the web in
AMPHTML. This is across both AMP pages
but also non-AMP pages because they make up a significant
amount of the web. We continue to get more
advertisers on board natively uploading AMPHTML
ads by default. We need to make sure there is great tooling
capabilities so today I am excited to have Ajay Shukla from
Adobe Animate to come tell you about AMP support in Adobe.
Ajay? AJAY SHUKLA: Thank you very
much. My name is Ajay Shukla and I am the product manager for
Adobe Animate. I am very happy to be here to support the wonderful AMP project. So, we all know that Adobe is at
the forefront of creativity. Photoshop, Illustrator, Animate
essentially define what digital creativity could be. Talking
about animate, it has been a tool which is there for almost
20 years. During this time, it has
designed, defined, and nurtured animation
in all its forms and on all devices. For those that don’t know what
Animator is, it is the same tool as flash
professionals. It has been there for that long period of time. And I will talk a little bit
about animating in Flash Pro. It is a very simple tool. This is a samp of —
sample of examples where people who are professionals and
amateurs have used to tool for creating different kinds of
contents. It is used in large studios and
used in schools at the same time. It has many use-cases. One of the prominent use-cases
is advertising. Today, majority of the HTML 5
ads are created with Animator. It is a platform agnostic cool
meaning you can create animations the same way
irrespective of what you are targeting. It is a multi-platform tool at
the same time because you can export your animations to any platform of
your choice. We partnered with Google to add
support for AMPHTML. Why did we do that? Well, we found that AMP is a
performing and secure platform. From an AMP perspective, Animate
is a very simple and visual
multi-platform too. What I am going to do is show
you how to create, how to convert, and
how to compare ads across AMP. There is an XHACHL – from a company called digitify.
Let me show you. Creating AMP-based ads is very
simple. What you do is essentiallyessentially open an
AMPHTML document and there are four main
things in here. You have the stage which it at the top, you
have a timeline, you have the tools on the right-hand side and then
you have the properties. Using just those four things you
can create any kind of animations including ads. Here is an example. This is all done in Animate. I will show you how this looks
like. There is the AMP ad, then with
Animate, and there is another example,
one with Animate. That is the creative aspect. How do you create AMP ads from
scratch. Let’s say you already have HTML
5 ad you created with Animate. You don’t need to re-create that
ad. You can actually convert it to
AMPHTML format. So the same ad is available as a
canvas ad. Let’s say you begin with this.
This is a canvas ad and I know that because it says HTML 5
canvas. Converting this to AMP is
straightforward. You just go here. File. Convert to an AMPHTML. And it is basically converting everything from Canvas into AMP. This is the example equivalent
of the HTML 5 ad without doing any
animations by yourself. One thing you would have noticed
it is in the panel a bunch of things showed up.
This is when you translate from one platform to another platform you
cut down features that are not
available on a particular platform. They way it a visual
experience for you and you can see the creative
difference between the HTML5 and AMP. The other thing to notice now
that you have the same ad across AMP and HTML file you can
actually compare how to performance and other metrics
are. We use one of the plugins which
is actually not meant for ads. It is called the lighthouse
plugin and try to compare and contrast
between the two. On the left hand side is the AMP version, the right-hand side is
the — oh, this is the Canvas version. AMP version.
Canvas version. First takes 2. 9 seconds on the AMP site
against 3. 7 seconds on the other side. Let’s look at another metric. I
will encourage you to try it out ourselves and see the
comparison. The file size is 342 KB on the
AMP side versus 248. So Canvas ads are smaller than
compared to AMP. We are working with Vamsee and
he promised me they are working on improving the size as well
and then you will have the benefit of the payload size and the performance good. That was Adobe Animate and
creating AMP ads with, you know, Animate, web
creation, reconversion and the comparison of AMP and HTML5
ads. That is all I had. I am very happy to continue
supporting AMP. VAMSEE JASTI: Here is a quick
video explaining support for AMPHTML
ads in Bannersnack. Now you can create better banner
ads using the AMPHTML technology in our leading banner design
platform. Ad images, buttons or vector
elements all of which can be animated.
AMPHTML banner ads are faster, lighter and more secure than traditional
HTML you can download the whole set
and it will be uploaded to your Google ads account in no time. AMPHTML banner ads have smoother
animations and can be up to 50% loiter in comparison with a normal
HTML5 banner. These ads are delivered only after being validated making sure they
are build on high-quality without Malware. AMPHTML banner ads are supported
by a large range of browsers and many different advertising platforms.
VAMSEE JASTI: That was an ad about creating ads. Very meta.
Here is the final creation options for an ad developer. Of coursecourse, you can use
images or text inside AMP and have them create simple ads but
we want to provide developers with great, creative
flexibility. So, of course, you can handcode using CSS animations or take full advantage of the API Here is a brief peek into what
is coming. We will be working on mobile app
support where an advertiser can create a single app and have it drawn across
mobile web app. In Q3, we will be working on a
lighter Runtime. Right now we ship the entire AMP
page Runtime and there is no need because the ad use-cases
are smaller. And in Q4 we will be supporting
support for more interactive swipes, gastro-base ads and
dynamic ads so you can do things like fetch client-side
information and lowering the real-time. With that, I will turn it on to
Kat and talk about monetization. KATHARINA FAMILIA ALMONTE: I
will talk about AMP monetization and what we mean with that is
putting any type of advertise play ad on your websites to make money off of advertising.
When we first started with AMP, we really wanted to strike the
perfect balance between delivering the best in class
user experience to users of AMP but also giving you all the
tools to make the most revenue for your business. Here are a few examples of how
we do that. For example, any ad on an AMP
page has to declare its size before the
ad request can be made and that is
to avoid content reflow. Interstitial is not possible on
AMP. Another one that is more recent
is when we launched fast fest last year meaning we fast fetch
AMP ads on AMP now. They are fetched as fast as
possible asynchronously and the ad only renders when it is
likely to be viewed. These are some examples. Having said that, AMP
monetization still perform wells — performs
well. We talked to our friends at
Google ad manager and they have seen ads on AMP pages grow 300% year-over-year
which is impressive. AMP supports over 150 ad
networks this doesn’t include. It doesn’t include direct sold
ad revenue either. This number shows that
publishers using these platforms continue to
invest in AMP and in AMP monetization. We have done a lot
of work over the past few years to make sure you
as publishers that depend on
display advertising have the tools. I
will go through the list. They are not brand new so you might
have heard of them. For example, you can do ad refresh, you can do roadblocks,
fluid ads, responsive ads, header
bidding. We work with a lot of the top
header bidders today. You can integrate with data management
and content management platforms. You can do video advertising. You can benefit from fast fetch
which I mentioned earlier and you can do auto ads. These are
just some examples. I want to continue by calling
out the most recent four launches we have done in this
space which you might not have heard of yet. I will start with
this one. We enhanced the AMP consent
functionality. Publishers are facing an
increasing ask for providing users with consent
choice and notice. For example, due to the general protection regulation, GDPR in
the EU, last May, we launched AMP consent. It is a component
that makes it super easy for you to manage consent flow in AMP
inventory. What is really brand new is we launched the capability to integrate with
third-party consent management platforms which we know many publishers
work for. If you work with one of them tell them it is time to integrate with
AMP. AMP I Made video is a component
we lunched over a year ago to make it easy to do video advertising on video
content on AMP with the ima SDK. We launched a couple
enhancements. You can hover over the feed, unmute the video,
unloop the video. I want to thank Rebecca clause,
an engineer at BuzzFeed, who tested
all this which is aPAZ —
amazing. We launched i Frame Sandboxing. AMP uses this function to
Sandbox all ads on AMP which protects the user. This is now working for all
users of safari, Chrome and any other browser that supports iframe Sandboxing
which is about 75% of the mobile web. And one more example is no more synchronous requests from ads on
AMP pages. Synchronous requests are a
really bad user experience and block the user from being able
to do anything with the page until the network request
succeeds or fails. The problem is in display
advertisingadvertising, there is no incentive for developers or
ad creators to write efficient code and that
opens up opportunities for bad ad creators to do things that they shouldn’t. For example, something like
trying to art —
artificially driving viewability. You are forced to
look at the ad and artificially driving up the viewability and
bad user experience. We don’t want that. Thankfully Chrome
released a feature policy that allows depri cating all synchronous effects. Before I go on into success
stories, I just want to make one point. We do a lot of work to give you
all the tools you need as I said and mentioned examples but at the end of there
day if you don’t put the same amount of effort into making monetization perform
on AMP as you do on your non-AMP
inventory you will not see the same results. If you don’t
believe me, I have some real cool examples of publishers who have succeeded and seen amazing
results. ETtoday, number one site in
Japan, they started AMP by February and by April they
decided to do it for the entire website. A few months in they started
going into the optimization and are a great example of a
publisher that uses a variety of ad formats to make the most out of
their monetization. They implemented a sticky ad unit at
the bottom of the page which you go see in the screen shot and
they use auto ads to automatically place and
optimize the ad formats and they use match
content which playsplaysoricorganic
content at the bottom of the page. They increased speeds four
times through AMP and ad revenue were up 10 times which is pretty insane and
CPM were up to 150% with the
optimizations they made. And next up, Jagran New Media. They are great example of a
publisher really going deep into the data to reshape their AMP and AMP
monetization strategy. What they did is looked into the
Google analytics data and ad manager they had for ad serving
and they tried to understand what is going on, how they can make more out of their AMP
inventory and realized 90% of article
pages have AMP equivalent but only 30% of the organic traffic
ended up there and only 1. 25 ad requests were coming from
AMP. They started fixing these and increased AMP coverage on
the website and put the same amount of ads on their AMP inventory and here are the
results. 4. 5 times more ad revenue and 15%
higher revenue overall and 150% more
AMP page reviews. I want to hone in on one best
practice we often see publishers neglect when it comes to monetization and that
is making sure that all your ad demand you
have on your inventory also has access
to AMP inventory. Your classic example, your large
new publisher and you have high-price direct sold advertising campaigns
coming in and you might do header bidding and
work with exchanges and have ad networks. The higher the demand, the
higher the revenue, simple rule of economics. That same thing
applies to AMP inventtory. Make sure all your AMP inventory
has access to the same demand. The Times Of India is another example.
They increased AMP all to of their site and use AMP on more
than eight of their websites today which is amazing. They are
a great example of a publisher optimizing their demand on AMP
but also ad density and here are the
results. Page load time on 3G increased
3.6 times. Revenue was up 1.5 times from advertising and
overall traffic increased 6x. Last success story. This is the
really interesting one. It is coming from Europe where
the Spanish language news medium Elpais paired with Volkswagen. They wanted to collaborate with
an advertiser that was interested in using new
technology to make the most out of their advertising campaigns.
They have done something unique that to date nobody else has done which
is they combined AMP technologies across the funnel
of advertising. They put an AMPHTML ad on there
publisher’s AMP inventory and you would land on a landing page
from Volkswagen when you clicked on it also in AMP. They noticed
the more AMP you added into the mix the better were the results. So the results are CTR went up
by almost 90%. Cost per acquisition dropped 40%
and the conversion rate went up by
almost 80%. I will leave you with that and
hand it back to Vamsee. >>VAMSEE JASTI: I am so excited to
talk about this section. I am not supposed to pick
favorites but this is my favorite presentation. You saw
the presentation by Jon and Han on stories and their rise in
byte size visual first content. We think stories can be used to
make advertising more beautiful and
immersive than the current state. There is diverse ways of
monetizing stories and today we will talk about three of them.
First up is story Ads. If you are a publisher who has created
a story, let’s say 10 great things about dogs, how do you monetize or
fund them? To answer this be look back to principles from
beautifully created magazines. When you look at a beautiful
magazine, the ads are immersive and take
up the entire page and placed
tastefully and finally they are flexible. It is a black canivist and you
can mix and match whatever else you need. With story ads we want to ensure
ads are immersive and take up the entire real estate
available. We want to make sure the ad is
only available and shown when loaded
in the background. Here is a video of BMW
orchestrating accelerated driving. The Runtime optimizes
the ad in the way it loads the ad in the background and only
shows it, just like a magazine, when the user gets to that
particular page. This has a good benefit which
gives the response back to the Runtime to balance the ad density with publisher
revenue. When the ad is ready it just
splices it in the Runtime. Third, story ads are open and
flexible. Basically, advertisers can use
whatever they want to create this beautiful real estate be it
image, video, timeline based animations and they are all
built on top of the AMPHTML ad framework so the capabilities
are endless. An ipt agency put story ads to
test compared to the regular. They did better in all metrics
across awareness, consideration and
feature awareness. Story Ads are already live for publishers
using Google ad manager. If you are an ad manager it is there.
You can go talk to any publisher that is serving or creating stories and
uses Google ad manager. Here is an example of a “Washington
Post” story that is talking about dogs and when the time is
ready and the ads load in the background the ad just shows up.
In the future, later this summer, we are working on programmatic
support so advertisers can use DB360 to
target any publisher across the world using Google ad manager
and directly deliver their ads to those stories. To make it super easy we
created beautiful stories and the canvas
is flexible. We wanted to get you started with a few common
formats. All of these are available at
amp. dev so you know download them,
customize them and do whatever you would like.
Next let’s talk about affiliate links. Affiliate links are links
which allow a publisher to monetize their outgoing links when a user purchases
something on the advertiser’s landing page. Stories already
support affiliate links. You could add outgoing links within
a story page. If you tap on get now for example you would go out
to the landing page but we wanted to make the experience
more consistent. Affiliate links will uniformally
pulse at the system level and when a user taps on them
publisher can control what they show including things like the
price of the product or the domain it is
going to. In this example, it is clear where the user is headed to on what the
prices are and we think it overall improves
the user experience. Of the last section, let’s switch gears to
sponsor stories. What we mean is just stories
which are created by advertisers for
marketing purposes. For example, here is a story
created by L’Oreal who is able to tell a
brand story by tapping through bite
size information in a mobile-friendly way. Instead of
creating a new web landing page, they create ad new story. And they use their online
strategies to drive people to view these stories either in the
back of the box or using physical QR code stations inside
the store. Notice how quickly the AMP Story
loads instead of maybe you having to
download an app from an app store to view more things about
the story. And large publishers already
have existing businesses and we thing stories are a great way to tell the
editorial — give an editorial voice to
advertising. Telegraph created a rich story and of course since
these are AMP Stories they worked beautifully on desktop.
But the key question in advertising is now you have this beautiful
experience, how do you drive traffic to them
and get user do is view them? A few examples. The first is when
you use a sponsor story as a landing page on
Google ads it is automatically delivered from the AMP Cache and from a user’s
standpoint the experience is snappy. Most social media tools
already have a rich preview. When you use the sponsor story,
you already get a very rich preview
for users to go to. And sponsor Stories can be
embedded inside regular web pages because they are literally
just a landing page. You can embed them inside an
iframe and auto play the stories and when the user taps on them
they launch into this beautiful experience. Last but not least, you can also
have users explore a sponsored story
from a story ad inside an organic story and have them view
a sponsor story. In this case, BMW has built an immersive storytelling
experience in a story. This is miles away better than if you
loaded this in a regular text landing page. I am inspired. I
don’t have the money but maybe I will buy a BMW some day. To recap we have three product
offerings. Story ads, and affiliated links
and sponsor stories for ads and publishers being able to tell
rich, beautiful immersive storytelling experiences. And
you can find out about all this and more at amp.dev/stories. I would like to turn it back to
Kat to summarize. KATHARINA FAMILIA ALMONTE: In
the beginning of the keynote you heard Vamsee talk a lot about
AMPHTML ads. The one thing we want you to
take away from that is all the benefits and improvements really lead to a
better ROI for advertisers, publishers and on top of that
they lead to a better ad experience for the users. When it comes to monetization of
AMP, keep in mind we always try and strike the balance between
the good user experience but also have so many tools out
there for you to actually make really good revenue from AMP
inventory. And last but not least, on story
ads, I encourage you to watch that space. There is a lot happening there
and a lot of room for true innovation
to create a rich ad experience. We are excited to be on this
journey and excited to have you be a part of it. Thank you so much for listening. CRYSTAL LAMBERT: Wow, wow, wow. Wasn’t that Ukelele performance
just wonderful? Can we give Kat another round of applause? I
know I will be singing that in my head all day. And another big thank you to all
of our day two keynote speakers understanding and leveraging ads and keeping
them user-friendly is so important to not just our AMP pages but to the
web ecosystem as a whole. Speaking of leveraging, our next
talk will cover interesting things about AMP and that is
going to be about how you and your development team can
leverage all the built-in benefits that AMP has and the
AMP team provides as a whole to improve your development
workflow. It is a talk I am just so excited to hear because it is
a side of AMP I don’t think is discussed nearly
enough. Please gave a warm wam to Naina
on to the AMPConf stage. Naina:
Good morning. My name is Naina and I am a product manager on
the AMP project. I am incredibly honored, nervous and excited to
be here today to talk to you about how engineering teams can
best use AMP to really accelerate their workflow while
making the correct decisions for their users. Now, we know why AMP makes sense
for a user. AMP helps engineering teams create an
inclusive space for their users regardless of device specs,
network connectivity or geographic locations. Kat and Vamsee just highlighted
why AMP makes sense for businesses and how it helps them
increase revenue but I am here to talk about why AMP makes
sense for engineering teams. As the number of frameworks
increase, engineers are often put into the position of picking
a technology that best sets them up for success. This involves picking something
that is easy to get started with, easy to maintain in the
short term and one that helps reduce the burden of
long-term maintenance and we believe AMP is that well-lit
path that allows engineering teams to make the best decision
for users and much like any other software as a service by
using AMP engineering teams can really help accelerate their
workflow. To better understand how AMP can help you as an
engineering team create a great product, let’s look at a
product lifecycle. First, the product engineering,
and UX team will get together in a room to create and validate
their minimal viable product and then based on those results, these teams will work on the MVP and have to ensure they
maintain the value of the MVP while providing
users with a great experience. Once the product out to market,
engineers will spend a large part of their time doing long
term maintenance including fixing bugs, releasing
new features or just dealing with growing tech death. And during the rest of talk, I
will walk through the rest of the stages of the product and convince you AMP
could be a great solution to move your product from one stage
to another. As a team when you kickoff a new project and pick a
set of technology to use you are trying to use for something that
can help you prototype and hydrate on feedback really
quickly. Let’s think about what actually hinders this process.
The first problem that engineering teams often face
when working on their MVP is being pulled away from working
on core product logic by infrastructure needs such as updating dependencies or
two third party components just not working together. And the
second problem you will often face is that you spend a large
amount of time pouring over large amounts of documentation or looking things
up on stackoverflow as you just try
debug issues that seem simple but turn into their own beast.
We believe AMP is a great tool to get started working on your
MVP because it solves these problems. The increasing technologies have
made the learning curve for web development steep. But AMP pages
are HTML with limits CSS and JavaScript, they help reduce the
time an engineering team spends ramping up on a project and this
allows them to focus on one thing and one thing only. The product and the product’s
users. We help you along this process a
little bit more by helping make really hard wep development
concepts easier to deploy on AMP pages. One example of this is this push
these days for websites to merge
speed, performance and offline capabilities with an easy access
that is provide by the web. One way developers do this is by
using progressive web apps or PWAs.
They provide great offline experiences to users regardless
of their network strength or device. Usually setting up a service
worker is really hard, however, when you think about service
workers in relation to other frameworks that is another
beast to understand all together. As Malte mentioned we
are releasing something called one line service worker. A tool that promotes AMP pages
to a fully network PWA experience
helping boost performance straight out of the box. This is
how simple it is to get started with a one like service working.
You will imp port the AMP service worker library and
initialize it. Who noticed that is at minimum two lines? I did and I was quite upset but
turns out that there is this really
cool short circuiting trick you can use to make it one line and rest easy like I
did. Let’s look a demo of deploying a
one-line service worker. Here is an example. It is a good-looking art gallery
site. Great homepage and great images
and fonts and what you can’t see in the demo because I am lazy is it has
great animations. Here is what it looks like
offline. If you were on Chrome the
offline dino experience would make it a litt better but
nothing is good as as your site. When you fix this deploying a
one-line service provider you get this. All it took you is
two-line. I can’t get over the fact the
one-line service worker is two lines. Let’s see how a site involves
into a PWA AMP experience usually. You have your own, you
open up the browser and enter an URL which then makes a request.
This request is received by your server. Usually, you have to host all of
your site’s row sources on your server including markup, images,
fonts and other assets but it includes
analytics configurations you honestly don’t really understand
and third-party JavaScript that is just adding bloat to your
page. And then your server will
respond with all of these resource and the browser upon
receiving them a little while later will finally render a page
on to the device. Now, let’s actually pause to think about
what is happening here. Usually, each engineering team that is
deploying a product to the web has to wear two hats. The first
is that of a project engineering team. One that writes the core
product logic that is imelementing the web app. And
the second is that of an infrastructure team. One that ensures the product is
secure, accessible and up-to-date with
the web development best practices. We on the AMP project
believe we are best suited to take on the hat
of the infrastructure team because AMP at the core is an
infrastructure team providing you with the components that
create the best user experience as well as the tools needed to
create the more performance site and it does so
well abstracting away painful tasks
such as dependency management and long-term management which is why when you
switch to an AMP-first site you can
focus on the website. You instead trust the AMP team act
as your infrastructure team and focus on shipping the
infrastructure that is needed for your site to not just
function but function with performance, with security, and
accessible. AMP serves the AMP Runtime that
governs all AMP pages ensuring we have view port management and
security and also serving the components that make up a
rich AMP experience. This means that the AMP’s CDN is helping
share the load of the assets that need to be served for your
site to function correctly. Now, again, when you start to evolve your AMP-first site into a PWA
AMP experience you are once again starting to think about
the infrastructure needs of your product. This is such a shame
since you just trusted the AMP infrastructure team to take on
these infrastructure needs and you were just focus on the
product. Using AMP’s one line service
worker you are able to trust the team to handle the object and
getting the benefits of a network resilient PWA
experience. You can cleck out amp.dev to see this in action.
The AMP team deployed the one line service worker to make it
truly network resilient. This site is a true testament to the fact you
can do this easily. Let’s take a look at what the
amp.dev server looks like. They imported the service worker
module and initialized it. They added some other value on
top of it helping it move forward the default service
worker experience. So, they decided what assets
they wanted to cache offline and specified a cacheing strategy. Documentation is one of the
first places any engineer reports to
when debugging imelementation issues. That is after we bang
our head against the wall. Documentation covers the getting
started but doesn’t help you understand the complex issues
you are fighting with on a daily basis. AMP documentation is
filled with examples of how to use AMP extension in isolation
but guides and tutorials on how to create complex experiences
such as checkout flows, for example,
and this documentation is localized and internationalized
to help large international teams have a shared
understanding of the AMP codebase. One example of us
getting documentation right is animations. Animations are a difficult to
grapple topic at best. The fact that the web has about three and
a half standardized ways of animating a div from left to
right doesn’t make this topic easy to
understand. How does one animate think? What is a performant animation
and what is the difference between a CSS and JavaScript
animation? Crystal had the same questions and actually put
together excellent resources on creating simple and complex
animations in AMP. Both of these are resources you can find on
amp.dev. Now, the AMP project doesn’t
just create great documentation, we believe in reducing an engineer’s
reliance on this documentation and one example is our visual studio code extense
that makes checking documentation for validation
errors as you code along helping you itrate. The next step is to scale this
MVP into a fully fledged viable product
that remains the value of the MVP and
adds great experience. Some of the things top of mind is the
fact as you write more code you are taking on the responsibility
of ensuring your code meets all of the web development best practices as
and when they are discovered. These become hard to maintain as
your project goes on and often lead
to a growing tech deck in your project. Imagine you are trying
to create a product detail page and found two components that
work well together in theory. You start writing the code and
realize their APIs don’t line up
together and you hack them together and five months down
the line you will have more tech debt. And the last and painful task
that any project needs to keep top of
mind is dependency management. Your infrastructure team needs
to think about this actively to make sure your product is
secure, is accessible, and even just usable. Now we believe that AMP can be a
great assistance here and let’s see why. The one benefit that
AMP provides you over other frameworks is the guarantee that
all AMP components meet a certain benchmark of performance,
accessibility, and security by default. The AMP team guarantees
the code we produce reflects the best UI
practices as and when they are discovered. One example of this
is our ability to ensure all components released
meet high acability standards. There is a tiered criteria to
measure how accessible your site is and
by at least maintaining a WCAG rating you are meeting the
accessibility roles. AMP components go through
extensive accessibility audits by the UI and accessibility working
group. This ensures we go further and
help you meet AAA compliance. We have the performance working
group that is responsible for monitoring and improving AMP’s
performance for all AMP’s page and members of the performance
working group are the ones who worked hard on making the
one-line service a retally. The AMP project ensures we
perform optimally on our end but provide you with the tools
necessary to make your site perform. Another way AMP helps
you create great user experience is my leveraging
AMP’s working groups. These groups specialize in creating
great experiences within their domain. This ensures all of
AMP’s offerings work well with each other and helps you create
great end-to-end experiences. And a large part of our process
here is actually facilitated by a design
review and intent process. This allows us to ensure all
concerned working groups are able to use their experience
within their domain to ensure all components shipped by the
AMP project are performent and accessible for the user and
profitable for businesses and developers. A large part of this
design review process is seeded by our intent
process where any contributor wanting to
ship or depricate something has to document their thought
process so all stakeholders have the relevant information needed to make an
informed decision. The last way we help you create great user
experiences is by helping you offload really painful tasks
such as dependency management. Like I mentioned before, AMP is
at its core an infrastructure team. It helps provide engineering
teams with tools to offload other tasks
such as dependency management and
compliance needed and a lot of this is made possible by the
infrastructure working group. They ensure all packages used
with AMP are always updated allowing developers to gain productivity by allowing
them to focus on the core project and offloading the tasks
that can be a huge expense in terms of time and money.
Speaking of dependency management and keeping things
up-to-date, a large part of AMP’s value proposition like
Malte mentioned in the keynote is we have an evergreen release
where every week we update the Runtime that governs
AMP and the con idence that creates a
great AMP experience. How are we able to do this? The first way we assure our code
is of the highest quality is by creating a strong infrastructure
allowing us to create end-to-end integration
tests that check how components wok in isolation and with other
components. Next, we automate as many tests
to make sure we are catching issues as
we iterate on code. The third way is making sure we
cut the canary with all cords the week
before we cut the production release that way parners can
test sites and use-cases against the AMP Runtime and add
their feedback to our heavily QA process. I want to thank
everyone who opts into the canary. It helps us get incredibly
valuable feedback and your friendly AMP infrastructure team
appreciates the feedback. Now, because I can’t stay on
stage more than 30 minutes, let’s say the AMP infrastructure
Working Group works a lot more to make sure AMP’s releases are
always stable, secure, and offer you the most cutting-edge
features. Let’s take a look at the last stage of product
development lifecycle and the most painful stage. Long-term
maintenance. If you ask any engineer they will tell you
their code doesn’t age gracefully. It is quite the
opposite. Why is this the case? First, as you start using a
component from one project and then you
add in another component from a different project, you realize they
tonight work. Secondly, while adding in
best practices at the start of a project is a hard task, folding in best
practices over the duration of a project is a much more difficult
task in fact. This is why engineering teams
will toward the end of their project usually just scrap their
entire project and start a bunch of refactoring. This is how AMP
helps here. We do solve by maintaining a closed feedback
loop with developers using AMP to conferences like the AMPConf
or AMP roadshows or to GitHub. We believe that we do a great
job in releasing high-quality components that help developers
get the job done but we also make sure we have this closed
feedback loop so we can make sure we are improving our
offerings in the long run. Let’s take a look at the feedback loop
we have had with developers deploying AMP experiences. Now, first example is us
implementing element level infinite control which helps create an
engaing experienceexperience. This was clicked off by
Pinterest engineering team. The AMP UI group picked this up
and built it in with close partners
who gave us near real-time feedback. At
this point, again, I would like to thank the chance to thank
everyone who does opt in the process. We
believe regardless of what vertical you are using AMP for, be it
publishing or e-commerce, two of the most important things for users to do is find
content quickly and take action quickly. This is where auto
complete becomes the bread and butter for creating a great
search and form filling experience. We had an example of
how you could create a great auto complete experience on amp.
dev using AMP buy and AMP list. However, that didn’t full oh
express the powers of an auto complete features because it missed type ahead,
client-side filter, Etc. We are excited to announce we
are working hard to release a new
component called amp-autocomplete. You can see
how far two airports are. It turns out AMPConf has covered
5,80 miles east. If you want to find out where the next conference is, please, find Paul
and find out. We hear you regarding carousel. We are working on release a new
set of primitives. Some of these use-cases are a
news gallery that helps you really highlight the powerful images that
accompany a news article. A home page care SL — carousel
that allows you to highlight the new information on the site. Related lists to help keep the
user engaged. As well as other experiences
such as recipes that rely on a
horizontally scrolling div. We are working hard on AMP
carousel and promise to have it ready for you
soon. Amp-toolbox-optimizer.
Publishing AMP pages has been tedious because they are
considered invalid AMP by there validator. As was mentioned on the TSC
panel yesterday, I am excited to announce work on ensuring the AMP validator
will support the validation of all transform AMP pages. Once this is launched,
publishers can chose to publish transformed AMP pages in a
paired or first AMP approach while making sure they get great
performance even if documents are not served from the cache.
And let’s close the loop on one line service worker by talking
about upcoming features. The first is an ability to force an update for the service worker if
you believe the deployment has gone wrong. The second is to ability to auto matically deliver optimized AMP
pages. Picking a technology stack that
helps make deal with growing tech debt easy helps if you stay on
the path. You get these learnings for
free. These learnings are actually informed by not just
bugs that are being filled or features that are being raised
but also as the team increment
improves the experience offered in AMP based on experimentation
or research that is conducted by our great team. These improvements are offered
to the product end users without
involvement from your engineers. Let’s look at how AMP helps you
fold in best practices for free. We work closely with standard
bodies to ensure engineers using AMP are
always getting cutting-edge technology
fast. We with excited it work with anpationworkload which allows
you to write stateless. This helps you create jank-free
animations. We are working on all position
bound animations and helping them run
jank free. We have been making changes to
AMP components already released. Some are images and lightbox
gallery. Let’s see some of the
improvements we have been make. One problem is dealing with
responsive assets. In the attempt to provide a great
experience to users, developers will load unnecessarily large
images for small devices. We have been making improvements to
AMP images so developers are always downloading the right
size image for all devices which makes image
loading faster on mobile devices. Currently images are
seen as static content that can’t really be interacted with.
In fact, rich images with great detail are hard to engage with on small
devices such as mobile phones which is why the AMP teal will automatically add
the lightbox attribute to all images where the makes sense
meaning users can tap on the image to interact with it
and see the great rich details on images that photographers
have worked really hard on. And then while the content is in
Lightbox more, we are incorporating more app-like
polishes for all AMP pages will help increase the delight of
using an AMP page for your users. One example is improving our
swipe to reduce interaction so we are reducing the jarring next when they
transfer from light box to the inline article. Another project
the AMP team has taken on is that of refreshing our loaders.
Currently, you will see the three dots while waiting. If you
haven’t seen them, don’t worry. You have great network speed.
Not everyone does. We interviewed people who
interacted with the web and realized
loaders didn’t create the perception of speed
or make the user happy. We have been revamping the loaders. The first loader will be
rendered for all AMP components regardless of what it is. The
second loader you see is our revamped ads loader. The third,
and the one I am most excited about, is a content aware loader
that will help your users understand what kind of content
to expect. Here you can see the Pinterest
badge inticaing — indicating the content about
to load is a Pinterest skin. We are hoping to get the new
loaders loaded soon. They currently display this
static indicator as you can see. This creates an immediate jump
from the indicator to the fully rendered
point. This is jarring to users
especially those on slow network speeds. We are adding a new
mechanisms transitioning from a blurry image to a full-size image to help reduce
the jarringness of actual content being loaded. This was a whirlwind tour of all
components AMP has to offer. Let’s take a look at the product
lifecycle again. AMP helps your engineering team
create and validate minimal viable project with great ease by allowing you to
focus on product development. As your MVP evolve into a fully
validated product, AMP works to make sure you serve the users need
and provide a great experience. And AMP lightens the load of
long-term maintenance by helping you fold in web development best practices while
having to offload painful tasks such as
dependency management. AMP is a valuable team for all engineering teams and this means
you are excited about using AMP I have questions. You can first
of all go to the design and UX booth if you want to
engage with our amazing UX designers and
researchers who work on the AMP project. They are eager to chat about
your experience and learn about AMP. If you have questions about
making your site interactive and performant,
you can go to the working group and booths there. With that, I
first wanted to just thank all the members of the AMP project, especially those from the UI and
accessibility Working Group and performance and structure
working group who made this possible. I am here as a messenger. And thank you to you sitting
here and folks on the livestream for allowing me to share this
narrative with you. I hope you have a lovely
conference and thank you. CRYSTAL LAMBERT: Excellent.
Naina up there asking the hard questions like where is AMPConf
coming next? While we can’t answer that for you today, I did release a question
in the sli. do which is ask where you would
like to see the next AMP Roadshow going. YUSUKE USTUNOMIYA: Where would
you like to have the next AMPConf be
held. It will be discussed. So if you could make your comments
where you would like to have that.
CRYSTAL LAMBERT: Kickoff to the morning at AMPConf. Coming up
next, we have a coffee break and hope to see you back in here
at 11:00 a.m. YUSUKE USTUNOMIYA: Going to a 30
minute break so come back at 11:00. YUSUKE USTUNOMIYA: All right. I have the poll results. Mumbai, India. Toronto. Paris. Moscow.
Hawaii. And we have two Tokyos. It is really great you liked
this place but, yeah. If we could have another AMPConf
next year. There was many answers and many replies. Thank
you so much. We will try our best to get this
happening. How we migrated our entire site
to AMP without the user noticing. Please welcome, Andrea. ANDREA ROSAL REBOLLEDO: Hello,
everyone. My name is Andrea and I am part
of the InEventos. com we were created in Costa Rica
and it is present in 13 countries. We are a small company
integrated by two people. The developer and myself. Being so small, we have a few competitive advantages.
Of them is the ability to make decisions fast thanks how
reduced we have. We must be aware of the opportunities offered by new technologies to
take advantage of this. Doing some research, we came
across AMP and with AMP we knew we had the opportunity of going a step
further. Once we made the decision of
using it, we started amplifying our site
and after two months of gradual changes, we migrated 100
of the pages without the end user noticing.
During the next few minutes, I will tell you a little bit more
about it. We started with our blog with no intention of FWOEG going much
further. FWOEG going much further. FWOEG going much further. going much further. We used a horizontal column to
show the static content on the screen. In this way, AMP allowed us to
create a version of our blog that ran very fast on mobile devices and stood out
in Google Search’s. We were maintaining two versions
and asked ourselves how feasible it would be to just have one version that
could properly display on smartphones and laptops and get
all the benefits of AMP at the same time. Here we ran into some
difficulties. In the first place, our blog
shares the same layout as our site. Same header, footer, menu,
behavior and appearance. We had to create an identical
layerout using AMP. Secondly, our site and blog used
columns and are fully responsive. We needed a responsive CSS
framework that allowed us to create grids with rows and
columns. The one column horizontally
centered approach was no longer useful.
Fortunately, all the official AMP sites are fully AMPed and
this helped us understand how they saw some of
the difficulties. We saw that AMP star uses a
lightweight responsive CSS framework called
bay CSS which we could easily create columns and replicate the responsive
behavior of our non-AMP pages, adapt them to
multiple device sizes. Besides AMP is responsive by
design and almost every AMP component can be marked as
responsive by setting the layout attribute to responsive. These allowed us to have a
single AMP version of the blog with an
identical layout to the non-AMP. These pages look the same as
before so AT&T — that the user could navigate
the pages. These pages were responsive. They looked, felt and worked
exactly like the corresponding non-AMP
version but were faster, stood out in
searches and avoided using heavy libraries. As a result, we understood AMP
was much more than a tool to display static content. We
started using it as a powerful framework to build the rest of
our site. We start would the content pages
due to their static nature did not
present any difficulties. A new challenge was presented
with the interact pages. We had to build fully interactive user
experiences while maintaining the user-friendly nature of
them. And if possible, we had to do it without the user noticing
because the user already knew the appearance and behavior of
the site. So we had to do it as seamless
as possible and keeping the functionality in tact. We continued with the home,
product and category pages. Pages that drive the most
traffic and are fully interactive. To build these pages, we used
amp-bind which in combination with other AMP components gives
support for the creation of amazing interactive experiences aChristmas Eve —
achieving awesome results. Let’s start with the homepage
where we can see a show more button and a
search input field with autosuggest which is present in
every AMP page header. They were implemented using the
same AMP components. AMP bind, form, mustache and list.
Let’s so start with the show more button. It makes an ajax request. It uses a mustache template. A request to the server is made
loading search results into an AMP state
and amp-list linked to a mustache
template is populated returned rendering
the links. And the product pages we can see
request quote, contact, reserve buttons
which we will explore the implementation
later on,we can see social share
buttons implemented through amp social-share. We can see a photo gallery
implemented with an amp-carousel. We can see a YouTube video
implemented through amp-YouTube. And a Google Map implemented
through an amp-iframe. And the category pages, we can
see the same buttons using the product
pages to request quote and book. You can see the Google map of
each company profile. As you can see, on the same page, we used
multiple buttons that implement the same functionality for
different listings. For example, all the request
quote buttons display the same form. Amp-bind allows us to the bind
the form with the company being contacted
difam — dynamically. We have just one request in the page
instead of one for each button. Moreover, exactly the same code
is referenced by the product and
category pages avoiding code duplication. These quote requests which were originally jQuery boxes. We use CSS to give the well-lit
boxes the same form. The form contain allows us to
validate and summit user input to the
server. In here we can see how we
replace jQuery dialogue with
amp-lightbox. Using the custom validation
attribute we specify the type of validation
performed through the form and we
implemented this in a declarative way. Below, we can see how when the
user presses their request poll button after setting the state
that allows us to dynamically indicate the name and ID of the company contacted, the
lightbox is shown. The reservation form allows the
user to book a day and time. For this, we also use the
amp-lightbox find and bind components in
theprieveous case. We use the amp-list and mustache
to display the day and availability. Here we used three AMP state
instances. One for availability check and the other to hold the
date and time selected by the user. When the user changes the month
in the calendar, it triggers request
that retrieves available days in an AMP list with a mustache
template. When the user selects the date,
it triggers a request that reveals the available hours for
that day. With amp-bond we toggle
visibility of month, day and form views. And perhaps one of the biggest,
or let’s say the biggest challenge during this adventure,
was the implementation of the photo attachment which was
present in the non-AMP version and we had to keep it when we committed
to maintaining the functionality of
our site intact. For the photo attachments, we
used a third party JavaScript library that simplifies the loading of
multiple images from client-side. However, there is
not yet an AMP component that allows us to
solve this requirement. So, we chose to isolate just the
part of the page on its own non-AMP
and include it with an AMP iHPrame.
We were able to keep the same user-friendly experience of the
previous version. We can see the AMP iframe that
allows us to attach the photos. The logic for sending the photos
is implemented in a non-AMP page
which uses the jQuery and other third party
libraries. The non-AMP page is linked to
the AMP iframe my means of the source
attribute dynamically. Since in a query string,
parameters necessary for the identification
of the contact of the company are sent.
And that was it. Today we have more than 15,000
AMP pages with 0 errors. Page loading time had a decrease
of more than 40%. This resulted in an increasement of more than 10% in conversion
rates. Regarding the difficulty, once
we changed the mindset of building with JavaScript to
building with a more declarative framework, AMP was much easier,
required less coding than previous versions, and this
resulted in cleaner and less complex code. We believe that
AMP facilitated our decision making process since we do not
have to keep comparing difference options of JavaScript
frameworks and responsive CSS frameworks trying to figure out which one is the most
suitable or appropriate one. AMP offers what we need. We believe in AMP because we
know it’s based on solid principles pushing the web forward and backed by a
large community. On behalf of Vernon and myself,
I would like to thank the AMP team, this beautiful country for
welcoming us, and all of you. I hope this was useful. Thanks. CRYSTAL LAMBERT: Now, that was
such an outstanding talk. Being able to switch your entire website from non-AMP to an AMP
first approach right under your user’s nose without them
noticing? That is absolutely incredible. Another big round of applause
for Andrea and her team. I know they will be a big hero
in the AMP community. We are absolutely stunned by that.
I have a quick question for everybody. What do you do when
you are confronted with something you just don’t want to
read? Something that is completely boring and off topic
and not quite engaging? Just skim over it. Something I am finding really interesting and something that
is fascinating about the upcoming talk is how they are
leveraging AMP Stories to build an engaging experience for
readers to really enjoy this content, to get information out
where it needs to be. Please join me as we welcome
Hans to the stage to talk about boring
content — excited YURZs: The power of
AMP Stories in emerging markets.
HANS PAUWELS: Good morning. I am Hans and I am the ceo of
Tappable. The cane and the limp is not a
gimmick or an impersonation of Dr. House. It a souvenir of a recent ski
trip. Tappable will be launching if a
month. It is a spin off of our FinTech opportunities in Africa.
Over the next 15 minutes, I will try and explain why AMP Stories
were instrumental to our business in Kenya and how they can be instrumental
for your business. As I look around the audience, I see a lot
of people that are probably active in the more mature
markets. I would like to put a little bit of broader perspective on things.
This is a demographic map of the world. It focuses on the median age of
the main regions in the world. If you just compare Africa to
North America, Africa has nearly four times the population of
North America. The median age in Africa is
under 20 years old. In North America, it is just
over 38. There are now 600 million young
people under 20 in Africa but there are only about 80 million people under 20
in North America. Now you may ask what has this
got to do on a technology conference, right?
Let’s have a look at the few countries. This is Indonesia.
They are leading the world in e-commerce. No less than 87% of the internet
users made a purchase online in
December 2018. I am sure there are e-commerce people in the
room. They would be pretty jealous. Or
the Philippines. For four years in a row,
Filipino internet users lead the world in
internet consumption. More than 10 hours per day on average. 99% of the internet users are on
Facebook. Or let’s go to the other side to
Brazil. 98% of internet users in Brazil
are watching video online. That means in Brazil, YouTube
easily outperforms Facebook. What do these three countries
have in common? Simple. They have a huge
population that is young and that is digitalty
savvy. A population that adapts to new technologies easily and quickly
that want new technologies. From this perspective, I would like
to ask you now whether you think
that your customers will be in 10 years time? — where. The whole market for our FinTech
activities is Kenya. We are working there on improving financial capabilities of people
through data and technology. We currently have two products live
on the market and I will talk about them in a minute. But why did we chose Kenya as a
product for our FinTech activities? Kenya is leading the world on
mobile wallets. You may see 49% on the slide. In reality, this comes closer to
a nearly full 100% mobile wallet
penetration and why? Because you need to be 18 years
old to have a mobile wallet and median age is under 20. Do the
math yourself. Let me introduce you to Paul. Paul exlimpifies the working
population. 78% of the people have no
monthly salary. Their revenue fluctuates from
day to day. Paul is a driver and drivers for
Uber and other platforms. He continuously switches between
platforms to get the best rides. As customers pay him with mobile
money on to his phone. His smartphone the center of his
business. He uses about 500 megabytes of
data to run his business. Like most Kenyan’s he buys
airtime and data on a daily prepaid basis.
We has a dual cellphone and switches between operators to
get the best deals that are available. The problem is there
are more than 200 bundles on the market in Kenya
at any given time. Information about them is very difficult to
get and when you get it, it is very unclear and very often
even misleading. We build Boost and boost is our
comparative website and chatbot that allows people like Paul to
select, to analyze, to compare, and to
purchase the best bundle that meets their requirements and that meets
their budget. Here comes the problem. How do
you tell Paul which bundle is the best for him? How do we inform him that he can
save money or get better value? How to we send Paul tips and
tricks? We tried it by publishing
800-word blog posts and we failed absolutely miserabley.
Have you every tried to read this text on a small phone in
Kenya? We did it and it wasn’t the best
user experience. We had to make our content
attractive and easy to read. We condensed the content to a
handful of pages and focused on visuals that will apply to young
users. We cut the deck down to the
absolute minimum and that is far less than a tweet. We started sending out these
stories as notifications in our chatbot. We had a major issue
with that because we had to code every single story from scratch
and that took us 3-4 days. That is hardly a scapeable
solution —
scalable solution in anbusiness. The result of AMP Stories just
blew our socks off. We went from a session time of
20 seconds to nearly four minutes for our stories. People just automatically
connected to our content. What’s more, 87% of our users clicked through to the very end of the
stories. At this point we started to understand the power
of AMP Stories and we also understood that we needed to
develop a story building tool first so that we could scale. It
was at this point, we decided to launch Tappable as a spin off of
our FinTech activities. Let’s take a closer look at the power
of AMP Stories. In this presentation, we focus
essentially on the effect that AMP Stories can have in emerging
markets but don’t forget all AMP Story design principles apply equally to
mature markets so don’t just runaway yet. EMAURJEMAURJ — emerging markets
are smartphone markets. Smartphone ownership continues
to grow double digits year on year and
this will continue. We all know stories are the ideal format for
stories and using stories to communicate with your audience
in these markets is simply a no-brainer. But in all of these markets
there is an enormous variety in smartphones. audience in these markets is
simply a no-brainer. But in all of these markets there is an
enormous variety in smartphones. Screen sizes are between three
and half and six and a half inches. How on earth do you design
content for this variety of screen sizes?
Well, not the way social media is doing it. If you have a
recent smartphone this is familiar to you. In three of the four formats you
see behind me protect this cut off. The user is put off by this and
he just clicks way. That is not the case with AMP Stories.
The AMP Stories format is responsive and fits all screens
perfectly. The content is visible and the
user is kept fully engaged and clicks
through till the end. This has been one of the main
success factors of our activity. If I take Kenya as an example,
the mobile network infrastructure of operators is rather weak in some
areas. Internet is mainly limited to
the big cities and the roads connecting the big cities. Because AMP Stories are loading responsively, your — users are
not looking at the spinning wield. This has been a major
contributor to higher session time and
completion rates. users are not looking at the
spinning wield. This has been a major
contributor to higher session time and completion rates. The Facebook algorithm decides
who will see our content. That is unless we pay for ads. We can reach our entire database
with AMP Stories. We can segment as much as we
like and we can send specific content to
specific segments. We can connect users to more in-depth
information of relevant topics by means of specific call to actions on
pages. This has been an incredibly
powerful tool for us. Most of the information that we
have put in our stories has a long shelf life. Network operators don’t change
their bundles every 24 hours. User recommendations don’t
change overnight. The 24 hour lifecycle of news
stories is just an impediment. We want to keep our stories
online for as long as we want and AMP
Stories allows us to do so. We started making stories because
every story has a link and because we
can send that link to our customers. How
do we do? Any way we like. We often put it in SMS message. If
you are staying in Tokyo for a few more days, I suggest you send
the SMS with Tokyo to 1-470-460-6-460 and we will send
you back a guide of the coolest
places to visit and hottest bars in Tokyo. But our choice of
distribution channels is endless. We put links in stories to
chatbots, emails, tweets, WhatsApp, our
stories and website and send push notifications. We link to stories from a QR
code. Why should you use AMP Stories? Because it is simply the ideal
format to have your content read on smartphones. All across the
world, more and more users are accessing to internet
from their smartphones. You should use AMP Stories
because they are verstile. The user will always
have a good user experience and good user experience leads to
engagement and engagement leads to higher conversion rates. And most importantly, you should
use AMP stories because you are in
role and you decide who sees your content, you decide the
distribution of your content and you decide how long your
content wailwill stay alive. With AMP Stories, you are in
control not Facebook. We created Tappable to solve our
problems that we specifically had and we are putting it out
and the public will be live very soon. So, get the Tokyo guide.
You can scan the QR code. Get the Tokyo guide and just
point out how powerful the story builder
will be, or you can sign up for early
access on Tappable.co. But most importantly, enjoy your
day in Tokyo. Thank you very much for your
attention. YUSUKE USTUNOMIYA: We had
various companies provide us in how they
use AMP. Thank you very much for that. It was very interesting. And see how they AMP is actually
used was a good reference. Our next session is the Google Chrome team joining
us. I am not sure how many are aware we have a Chrome team in
Tokyo like service workers and modules and also
Signed Exchange as our topic has been
developed partially in Tokyo. So, PM or engineers will join us
in our next session. Chrome and AMP in 2019. Please welcome Kenji and Kinuko. >>KENJI BAHEUX: I am French. KINUKO YASUDA: I grew up here. Last year in Amsterdam, we
announced a collaboration with the AMP team. We will cover a
lot of things today but don’t worry it will be a short link to
a document with a lot of pointers so you can learn more and get started
on a few things. I am wondering how many of you
saw our first talk at AMPConf in 2018? If you were there, raise
your hand so we can get a sense of how many of you have context. KINUKO YASUDA: We will not point
so raise your hands. KENJI BAHEUX: Let’s do a quick
recap. The talk started with the idea
of Chrome and AMP share similar principles. You know Chrome has speed and simplicity as part of the mantra
and same for AMP because AMP is
Accelerated Mobile Pages. It was made for consistently fast and high
user performance. Speed and simplicity. We also both fight for open
ecosystem. Since we share the time same
ideals and wanted a similar outcome, we thought it would be
interesting to work together on common projects and what would
come of that. We announced a project to do
three things. The first one is to help improve
your productivity as developers. The second was make AMP more
straightforward. We have heard the feedback about things you
don’t like. There was a big announcement and I hope this is
part of the story and we have more to talk to you about. And
the last one is to enable more great user experience on the
whole web. KINUKO YASUDA: For speed, we
talked about investing in navigation
not just for AMP but for the whole web and seamless user
experience where websites scroll fast and respond quickly through
user input. KENJI BAHEUX: For simplicity, we
talked about helping you avoid errors
and reducing you falling into traps and putting you on the
path to success. We feel this is important because as you
probably know, the web platform has a long history and it is bound
to have rough edges and things that don’t work quite as well
and sometimes there are APIs that we ship that turn out
to be a bad idea. As we better understand use-cases we have ways of addressing long
standing use-cases. It is not surprise without
guidance, developers like you tend to fall into traps. It is
kind of like our fault. The web is complex and has a
very long history. KINUKO YASUDA: We also saw it as
a great user experience. They measured their performance
to keep things in check. KENJI BAHEUX: Before we go
further, I want to go on a short detour. I like bookstores and
books. Especially in Tokyo. Do look around. There are
interesting places that really define what a bookstore
experience is about. There are places where you can go grab a book and go to the cafe
session of the store and see if the book is if
you while drinking a coffee. Really
the best of both worlds. It is really interesting to
experience. Even without refinements, there
are things about bookstores and books that make it a great way to discover
and consume content. Story art is there to help you find
something if you already have an idea of what you are looking
for. Even if you don’t have an idea of interesting things you
want to check for, there are sections in the store that help
you find interesting things like snap beats, new releases,
trending books and so on. The other thing that is interesting
to note is that the book’s cover
and wraparound, the gives you an
idea of the theme or style of the book and a quick idea of if
this would be interesting to you. The other thing is it is a very
nice to grab a book and read a couple pages to see if it is
interesting to you. If you ignore the part where you actually go to the store, the
home experience is seamless and best
of all everything works offline.
KINUKO YASUDA: I like there story as well but in contrast, the mobile
web is not as great of an experience as it could be despite a vast pool of
content to pull and the ability to
access the content wherever and whenever. It is not instant or
seamless. Surely we can do better. This belief guides many
of our projects. So, all right, let’s dive right
into how much progress we have made. So, our top priority has been to
fix what we believe to be a fundamental gap on the web
platform. Instead of the bookstore-like
experience, we sometimes feel the experience on the web is like —
KENJI BAHEUX: An empty, cold library.
KINUKO YASUDA: That is sad. KENJI BAHEUX: There is a lot of
content out there but it is hard to find. If you think about it,
today with mobile devices and mobile experiences, our users expect a lot more. If you look at Native apps it is
clear these apps find new ways to
facilitate discovery and consumption. The web doesn’t do
well on that. The good news is that AMP is the
proof that we can deliver this user experience that is fast,
seamless and smooth but to do that, AMP had to work around
gaps on the web platform as you know. For instance, the UI is
not correct. There are a few things that are
not quite right. We had a long discussion with
the AMP team on how we can make sure we can deliver these user
experiences for the whole web and finding ways to achieve that
without all the DOM size you are aware of. Eventually we realized a key
reason behind AMP delivering fast
instant page load was the fact it has the
ability to cache and serve content from
M-cache and that means M can use that to do
prerendering which speeds up the load dramatically. OK. Going back to our book metaphor I think a book is like
a distribution mechanisms. Imagine no books in the
bookstore. You would have to send someone,
or you, to the publisher’s office or
warehouse and sometime the book would come in in bits and pieces
and you would have to go to different places to get it done.
If you think about it, that is the model we have on the web.
Don’t get me wrong, right? This has a major advantage. It is not like it is actually
good but sometimes it gets in the way in
terms of delivering some sort of user experience like we have
seen with AMP. In short, I think the web
doesn’t have a disposition mechanisms. AMP trying to close that gap
with the M cache which is like a make-do decision system. Luckily, we are also
experiencing a use case that would benefit from proper
distribution mechanisms and so with the AMP team excited about
this, we decided to properly staff this product. KINUKO YASUDA: And we are
talking about Web Packaging. It separates attributes and
enables a wide range of interesting
use-cases like privacy-preserving instant page
load, sharing between users and there may be many
more. Web Packaging is compromised of Signed Exchange and exchanges. With Signed Exchange, the signature vouges for the signature. This is a common way to bundle
several exchanges in a single format. And we have recently implemented
Signed Exchange in Chrome 73. Let’s see what this means in
particular for you. Without Signed Exchange, AMP uses the
Google domain because the resources are very bad from the
AMP Cache and this results in having the confusing
URL in the address bar. To mitigate this, the AMP team
has launched a comment area and then with
Signed Exchange, AMP can finally load under the correct origin
also letting you access your cookies in the data. So, no more confusing the URL in
the address bar. No need for a second address in
the content area. You can more easily pass the
idea of content. KENJI BAHEUX: The other thing
this does and maybe it isn’t of use a lot
of people but today you have to trust Google when you give your
article to the AMP Cache. The AMP Cache can do whatever it
want with it. There is no restriction in terms
of modifying the content but with
Signed Exchange because there is a signature it is no longer
probably for someone to modify your content. You can expand the scope of who
is able to distribute your content. I think this is very
powerful. All right. We understand that this is
something you have been long awaiting for and I am really amazeamazed because the
adoption we have seen have been incredible.
All the countries are in the process of launching their
Signed Exchange AMP article. We have a lot more coming soon.
KINUKO YASUDA: I am sure this wouldn’t be possible without the
partners and the people throughout the industry.
I will give a round of applause to the people in this room. Thanks a lot. KENJI BAHEUX: A few of the
partners are attending this. I have heard people from NDTV
are here and Yahoo! JAPAN is giving a talk later. There is a
session also on how to get started on this. Please, come to
the section. Let’s talk about simplicity.
AMP’s user experience is partly explained by two things. The first is it comes with rules
about what you can and cannot do. It also has a validation step to
follow the rules. These rules were designed to
avoid you to fall into traps. In a sense, AMP provides an easy
path to success. I think is a great model. At the same time,
we understand that not everyone wants the same rules or the
same-like safe pass. Sometime when you know what you are doing it is OK to go outside of
these bounds. KINUKO YASUDA: So we decide
something called feature policy that let’s you
design your own rules. What is more, you can also define rules on the per-document basis. You can change the rules on
third party iframes if you want. At least year’s AMPConf, we gave
you a bleeding edge preview of the media feature. It is currently available behind
the plug and we expect to ship soon. It allows you to control
the behavior of images and videos that lack proper
dimensions with size information. The result more
stable results. Let’s look at a demo. First, without the policy, you
can see the page load moves around. That
is because the browser had no idea the size of the image. But with the policy enabled, you
can see the picture doesn’t move around. The dimensions are
assigned the default size resulting in a stable layout. A few examples of image policy. In Chrome 75-77 you can
experiment with two new image. Unoptimized image and oversized
image. Oversized image is for the image
that is to go big for this disprate area. If you enable
these policies, Chrome will automatically replace the
automatic image with a placeholder like
what is on the screen. Unoptimized and oversized are
very common reasons. KENJI BAHEUX: It is great but at
the same time you are going to break
your website. KINUKO YASUDA: It is a bad
concept especially if you don’t know how many images. Fear not.
We have great news for you. In Chrome 73, you can experiment
with a report-only mode. Any policies can be suited to a
report only so you can find and address issues without having to
worry about breaking things. You don’t need to break things. Our
recommendation is you start with report-only and get things right
and then switch to enforcing the policy to avoid regressions. We also recommend that you
enable all the policy on your local machine
to a baseline as you implement new features.
KENJI BAHEUX: Fair enough. All these projects that we have
essentially motivated by our desire to see a greater
experience on the whole web and not just AMP in general. But
what do we mean by that? How do you think your website has a
great user experience? How do you measure this? At Google, as
you probably know, we love metrics. They keep you honest.
They help you keep focused. It is great motivation when you
have a goal you want to reach for. Defining what a great user
experience is really part. We believe a great user experience
gives the user what they came for as fast as possible. The second one is when users are
trying to use your website it responds quickly. And the last one is you want to
also avoid any annoyances that will
slow down the user. For instance, when you show a
piece of content having that piece of content move around is
really annoying. You should do your best to avoid
that. This is just like the basic
things. We would love your feedback on the framing. If you
think it isn’t quite right or missing things down the road,
please, let us know. The other thing we know is metrics only
make since if they are available across a wide range of products.
When you are at development time, it is important to have
the same metrics available to dev tools or
lighthouse. When the product is deployed,
you want to get a sense of what you saw is the same experience
for all users. That is what Chrome UX Reports gives you. It gives you insight into actual
user metrics. And finally, if you have already your own solution or are using a real
metric third party service, we want to make sure you can still
keep using these because that is what you are used to. Overall, the better better the chance, when we build a new
metric we do our best to expose it in
all these places. Currently we have two loading
metrics available. First is the time at which the
buzzer was able to paint something on the screen for the
first time. This might not seem like much but it is really
important because it gives the user the reassurance your website is
indeed loading. It is not stuck. Second one is first contentful paint. This is the time the server was
able to paint something that was potentially useful to the user.
This is where it gets interesting because potentially
this is what user came for. KINUKO YASUDA: I hope we have
made good progress on the things we have
talked about but we have a lot more
coming. Since there is a lot, we are going to cover only a few
highlights. So, first, on the metrics side
we had like to highlight two new
projects in particular. The the metrics. And so we have talked about the importance of making the content
is stable. I am sure you have all experienced something like
what is on the screen so the content loads fast but after
there is shades of layers that move the text and content
around. The common reason behind these
page jumps are because the image is slow loading or iframes. Layout
stability will make sure the layer has fewer issues. We
expect to have something ready by the end of this year. And
another route we have been working on is the metrics first input
delay. For your website to respond to
the first user interaction, making a
good first impression is important. It is very
frustrating to have a website that looks like it is loading but doesn’t respond. This icon took about 10 seconds
for the menu icon to respond to there user. It is a bit too
long. We reached out to website owners and they are working on that fix. If anything, the lesson here is
that this can happen to the best of us. We are also very interested in
hearing your feedback on this metric
which will be available on origin trial
hope in a few weeks. KENJI BAHEUX: Let’s go back to
my metaphor. A book isn’t perfect. For one, it can weigh a lot and
takes space. The web doesn’t have this
downside. Well, if you know the data, you
probably are like I am not surprised but the median size of
web pages is increasing and today we are around 2
megabytes and that is just for a single page. It is not what happened after
the load event. KINUKO YASUDA: We are adding
lazy loading. We are also providing a lot of
element. Our plan is to enable this lazy
loading by default for the user to have enabled the Chrome data
saving model. We want to give you control
past. In the year later, we plan to
let you default the behavior. You can default to lazy loading
and the only flexibility for important
elements. The browser only had to pull 250 kilobytes per image to get the
same visual ad. KENJI BAHEUX: Let’s switch gear
and talk about seamless experience. At no point in time,
you should tell a page is webbing. You can tell on the web, this is
a web experience. If you come from a background of native apps it is frustrated you
can feel it is different. It is not the same of what I am used
to. On the web, it is really, really hard to achieve and it forces you
into a similar page architecture which
has its own downside. Another experience where seamless experience is a Guam game
changer is when you need to use multiple
websites. You have a tiny screen and if
you want something that has multiple websites you have to go
back and forth between different pages or juggle
around. It is not a great user experience. Why this seems impossible to do
well we know it’s not because we have
seen it is possible to deliver a great user experience that spans multiple
websites. It just went around gaps we have
on the web platform. It is not perfect. We have been trying to
find ways to make that better. What are the gaps? I am pleased
to announce we have something we think will be
enabling the seamless experience on the web without major
downsides. We have been working on a new
API that will enable seamless navigation. We call it portals.
It is a bit like an iframe because you can use it to embed things but
unlike an iframe you can navigate. The first use case
shows it is possible to take a multiple change architecture up
and make it look like a seamless page app. This is the user experience that
people would like to have today. You can see the chapter, there
is a navigation to load the next chapter. It breaks the flow. This is a demo that we made in cooperation with a company. You can use portals
to investigate the next chapter as you reach the end of the next
chapter. When the user touch the embed,
you can trigger an animation of your liking, you can design it the way you want,
and use the portal to activate the
navigation. The second example is about
seamless experience. When you want to read one of
them, you can see there is a navigation
that breaks the throw. You can use the animation of
your choice to do a seamless transition. KINUKO YASUDA: As you can see,
pretty excited about portals. It is sometimes easy to target
the low-hanging fruits and you focus on tiny opportunities like
portals. So as humans we tend to assume
these are all the behaviors. For
example, Chrome render the page when the page loads because it
gives the users the assurance the page is
indeed loading. However, with pitch loads as fast as AMP we
found like this behavior sometimes detrimental to the
user experience. This website using AMP and oshas
very fast navigations, however, as
you can see has very fast navigations, however, as you can
see has very fast navigations, however, as you can seehas very
fast navigations, however, as you can
see we had a block frame between navigations. This happen because of Chrome’s
eager rendering behavior. To address this issue, we started to work on two projects. Sometimes it is better to hold
the painting. There is no need to rush. It is a fast project.
It is a change we are making in Chrome. The second project is
about giving control via an API that
generalizes the concept. The fast change we are making a
change in Chrome for things like
navigation where we basically hold thinking
of anything for a short duration. This might sound easy
but it wasn’t. As you can see, it addresses the
flash of block point resulting in
seamless navigationm you can try it out by enabling the flag and it doesn’t
require any changes. And we thing changes. And we thing this is great but we want to
give you control of how and when the browser renders. We are
introducing a new API called the display locking. It is currently available behind
the flag in Chrome canary today. It is a little lock on elements. It is not limited to page
navigation but you can also use this to
avoid do super fast rendering where you update elements on the documents that
are already locked. KENJI BAHEUX: There is a lot
more interesting projects happening. If you want to find
out more details, I would encourage you to watch the
session we will have ii/o. To close we would like to thank
our partners. We have been very lucky to have
you work with us on APIs like Signed Exchange.
Thank you so much. [Applause]
KINUKO YASUDA: If you have anybody here interested in our projects,
please, do go to this link and check it.
Thank you. CRYSTAL LAMBERT: We are going to
start setting up for the Google panel. This panel is moderated
by Monisha, she is the representative from the product
team at Google. She is responsible for building
external participants that enable the rollout of modern web
technologies such as AMP and PWA in the
Asia-Pacific region. She joined Google six years ago
and navigating the crossover between product and partnership and supporting
Chrome, assistant and web to build
magical products for all of Asia. Join me in a round of applause
as Monisha joins me on stage. MONISHA VARADAN: Welcome to the
Google panel. For the next 30 minute, we have a chance to ask
our leaders some questions. Some of you may know, Google has
been instrumental in the creation of AMP and employs a
full-time team to contribute to the open source project. As you
know, AMP helps publishers be successful on the web. We thought it was appropriate to
ask our lead RZs who can now come
on, their thoughts on Google, AMP, and how
Google things about the content ecosystem, and the future of content
experiences on the Thank you, panelists. We with with us David Besbris
who is the VP of engineering and the executive sponsor for AMP at Google. Ryoichi Imaizumi, Dion and
finally Malte who needs no introduction because you know him from the keynote.
Thank you so much for sending in all the questions. We have
received all of them and tried to pick the ones that have been
voted the highest and tried to pick the ones that are the most
relevant for you in the room and the ones suitable for this
leadership panel. Let’s kickoff with the first question which is
fairly important and I have been asked this a few times. Is there a risk Google will
abandon AMP like it has with some of its
high profile projects? MALTE UBL: I will give a
technical answer to this. I mean, I think as the technical
lead I have to anticipate that no
software lasts forever. There is all kinds of safeguards
built into AMP to outlast even Google
incorporated as a company because it first of all is an open source
project that is licensed under a patent 2 license. If Google for
whatever reason decided to stop working on it it would
still be there and folks could continue to work on it. There
are other thoughts or aspects. The AMP Cache’s URL format is
designed such as you can turn it into a redirect to the underlying document with
an Apache rewrite rule. You don’t even need a database. It is easy to maintain backwards
compatibility of the URL space into internty independent of the
existence of the energies that needs to run these URL. I think that is the technical
answer that anticipates possible
futures. MONISHA VARADAN: Is there a
non-technical answer? We are committed to AMP and
believe strongly in primary because if
you look DAVID BESBRIS: When a user comes
to us it is the entire end-to-end
journey we optimize for. We need the entire journey to be
fast and an excellent experience meaning your sites have to be
great. We have a long history of investing in the web and
investing in everything from training to making our own
browsers to do thing like AMP on the format side. We strongly believe in a
hyperperformance and mobile-friendly web. It is something we will continue
to invest in. MONISHA VARADAN: Will Google
address the security concerns Mozilla has raised
about Signed Exchange?>>DION ALMAER: We are trying to
balance there priveies —
privacy side. If I sign this how doion it will
be out of date or whatnot. There are different proposals. We are working on do we go back
and have a call to the server? Understand what is in the
package and the like and that is a
performance trade off. There is work to be done but
things are going well. You can watch on the different GitHub issues to see what is progress
but I am feeling positive. Ryoichi, question for you. We RYOICHI IMAIZUMI: We have
grown. That implies the importance of
the market. We have grown to over 1024 in
this building. We have on search and ads and we have Google maps and on Chrome
browser so the previous presentation. We have a research group on the
Google Brain which started last year. We have a diverse team in a
really small area. That allows us to do a lot. What has been the most exciting
for me is the collaboration with the Chrome browser team. Malte and I report to the same
manager and we have the opportunity to work together,
when asked, and as well as with the Chrome browser team in
Tokyo. MONISHA VARADAN: I look forward
to more. I speak to a number of partners in my role and get feedback about the
fact it is hard to build consistently great experiences
on the web. My question to any of you is
what are we doing for make it easier for developers to build great SPEERN
experiences on the web. We think people do great things
on the web. We are proud of what people are able to do. We are frustrated with how hard
it can be to build these experiences and the end
performance results. AMP is one fantastic way to kind
of rail in the right constraints and make sure you have the right
experience. You have heard about tools like Lighthouse and the
like. Right now, it is vitally important you are running Lighthouse
consistently with continuous integration and performance
budget and the like because it is too easy to get off the
rails. I see this kind of as a bug even though I work closely with the
Lighthouse team. We need to get better rails in place where it
is not as needed for you to make sure you are not setup. It has
been great to kind of take some of the ideas from AMP and bake
them into the web platform. We are working closely now with all
of the major frameworks and the like to make sure we can get all
of the good things they are innovating on and baking those
into platform as well. We have a lot more coming. Kind of pairing up with some of
these frameworks. You heard about Next.js on the
AMP side. Finally, we have created web. dev as a way to kind of give you
clear guidance. It is early days but we are really hoping to get a lot of the
correct guidance baking in our tools so
you can use Lighthouse directly and track over time and make
sure you have one place to go where you know what to do to
deliver great experiences. MONISHA VARADAN: Any other
thoughts? No? Cool. I love this question. We can have a lot of
people in countries I work in ask me this question. This says
I am an AMP lover and I want to do AMP but we don’t have an
inhouse engineer. Should we use an agency? What is your
suggestion? Many of us are in the same
situation. People keen on the product, understand the
benefits, but it is hard if you don’t have a developing team in
place. DAVID BESBRIS: I can take a
crack at this. There is a lot of emergency on
supporting AMP in the CMS ecosystem which we are pretty
excited about it because it enables people to get the benefit of AMP without having
inhouse engineers. AMP has been well supported by
WordPress and I think you will see a nice presentation from the
internal team at Google who has been working on the WordPress code it make this
plugin awesome. There is lots of different CMS
and technology stacks out there that
do support AMP. This is important to you. You are not building your pages
yourself. Ask your CMS tool. And see what
you can do. You will find that in general, a
lot of the middleware from everything to the CMS to the ad networks . All of that has been a big
focus for us to help bring us on board so these tools are
available to people who want to use them and use AMP.
There is a new training course out there. Maybe pick it up and play with
it yourself. MONISHA VARADAN: When will AMP
pages reach desktop search results? DAVID BESBRIS: We would love
them to, I think. In principle, AMP pages work on
desktops. If you look at amp. dev which is our web page for
the AMP project, it is an AMP first page
and works on mobile and desktop. It is a beautiful page on a
desktop. They do need to be designed for
desktop. You need to use responsive design and think
about users loading on desktop. Early on when AMP was started we
didn’t talk much about that. The M stands for mobile in AMP. In some ways we hinted maybe it
is more focused on mobile. So, a lot of the content out
there isn’t designed responsively in AMP today which
is a little bit of a problem. If we want to use it on search
on the desktop we would redirect users to content where it would
be a thin slice of content with gutters on each side. It is hard for us to send a lot
of traffic to pages that wouldn’t look very good. For AMP
store ease, this is an area where we are really excited
because as we look at soreies on the
desktop they look beautiful. Especially the work Jon and Han
showed you yesterday. It is a lovely por format in
landscape. We have a new start with the
format and this is new and it is explicit. There is a tag you can
leave in the markup that says it is responsive and build to be
responsive. Maybe that is an area we will look at on search if we get content that
will look really good on desktop.
MONISHA VARADAN: Next question I would love to throw to both Search and
Chrome. How does Search view their role
in the open web and in a similar vein how does Chrome view their
role in the open web? I know some of you represent
both teams. I think we have two roles is my
understanding on the Search to be an ecosystem on the open web.
First it is our long standing mission in connecting users and
the content creators. It is evolving, of course, and
it starts with a new type query and showed them 10 results. Now we have evolving to have
discover, more visual format. Fundamentally we are connecting
the users to you guys. This is the primary thing we can
contribute in this way. Second part is for example in the past when we
see a mobile-friendly ranking change, we tend to rank the pages rendered to
mobile to be higher. This is a massive change in
terms of ranking. We have the interstitial
launching the slow pages and these are our
second role that we want to carefully match
the web ecosystem in a way that would benefit both users and
publishers/content creators in the long term. We are built carefully to not
extract too much but when we see there is an opportunity for there long term
and sometimes we play that role
carefully. >>I work with the web platform and
it is like Tesla and wanting electric cars to take off. Our
job isn’t about getting people to use Chrome but more about all
users are meaningful engaging on the web and having a great
experience. We get to push the web forward
by pushing the platform forward and making sure Chrome is a
compelling application to actually get that engagement
but that is really what we say our role is. Making sure the
platform is ready and the content is fantastic for users
and then obviously for Google as well.
MONISHA VARADAN: Thank you. We do many things at Google. We
have many teams at Google. But it is not so clear to the
external world. I would love for someone to
articulate the relationship and how the future looks for Search, AMP, and News. That complex interrelation
relationship. Another question that popped up
on the sli.do was what is the relationship between AMP and Google News for
instance? Google News is a product we make
at Google which has a mobile version and a desktop version
and on the mobile version it prefers AMP as its
publishing format because it makes the experience much, much better for
usersusers. You can see this today if you use the Google News
app on your phone. Whenever you click an article, it opens up
quickly. We have been excited by the
development of AMP and being able to use it
inside our own products. That is an area that is pretty
important to us. We are also publishers of AMP
documents. I hear does Google use AMP and not only do we
consume it but we produce it as well. If you look at our
official company blog, for example, it is in AMP
format. We do like to use AMP as well. The kind of general vision where
we see things, three years from now we have three major pillars. One is the web content pillar
and AMP lives very much in this pillar. It is about making sure
the content experience is fantastic. You have got great experience
within just the content but more than that like we had earlier
talking about portals and the like. You should be able to
float through the web like you are going through a magazine.
Right now, that magazine is really slow to turn pages at
times. We want to blow past that and
just make sure there is a great experience, seamless transaction and all
that good stuff. We have the web app side of things which is
about making sure you have the rich capabilities on mobile and
desktop. We have desktop PWA and trusted
web activities to get you fantastic experiences that can
get embedded into the Android side of things and across mobile
in general. We have a developer success pillar which is just
making sure you can get the best possible ROI when you are
developing on the web. You get this full reach across all these
devices. Globally and everything else. We
have fantastic tools for you to make it as easy as possible and
obviously AMP fits into that. MONISHA VARADAN: I don’t mind if
you would put on your visionary hats to tell us what you think
the future of the web and content experience might be in
the next 2-5 years. MALTE UBL: I will start because
everyone else gets to say the same. What Dion just said with
the portals as the new primitive to making navigation from side
to side on the web feel more seamless and more integrated.
That really is aligned with what we were trying to do with AMP in
the first place and now that finds it’s way into
the web standards and a larger
percentage of the web beyond AMP is something we are working towards and want to see
in 2-3 years. In the keynote yesterday, I
mentioned I see stories as this first medium that was truly designed for the phone
experience. Along those lines, what I am thinking is that we
are actually still like learning how to use phones. What we have done so far is that
we have, you know, we thought we knew what the web was, and it
just made it smaller to fit on the screen with responsive
design but there was no transformation going on.
There was mostly application of the existing stuff which was
reasonable because we knew it waw already working. It is the greatest approximation
of what one might do. I think that as, you know, the
phone and portrait mode bechise the
primary consumption for content, we will see things are evolving in that
direction and AMP Stories is going with
that trend but I also don’t think it is the end of the road and we will see other
things like that emerging from folks
who grew up on their phones and never
used the internet any other way. I only work on the search team
these 10 years. I am seeing this from the search users and the
journey perspective. Yes, as a Search team we can
make Search result load faster but in the end the user click on
the result and find the content on the landing page. The web
search is the closed loop and users have a great experience on
the page and part of the reason we
as a mission before tried to play a
role in influencing web. We are excited about AMP and
most of the best practices are embedded. We tried to use the AMP and most things
they suggest there and this is
important because just think about the user experience. Even if you make your site
really excellent but if some other sites are not doing great, and the
people’s perception about the web is it
is slow. What I really want to see in the
near future is the web and search as
general, like on the good experience as a whole, and the user never get
frustrated in their journey. That is what I want to see.
I think one way to think about where the web is going to go is
truly think about the user’s expectations in their
day to day life. We are seeing more users coming online and
their first computer is a phone. Their phone is their experience
with the internet. This is happening worldwide and in
existing marks with the youth. The phone has taken over as the
primary computing device. To understand what users expect you
have to understand what their experience is today. Most users are spending their
time on phones and games. Like if you look at where they spend
their times. It is on their phone in
messaging apps and productivity and searching
the web but a lot of time is being spent in games. We might
think of the web and phone as a web browser. It is a device for productivity
but our users think of it like a
PlayStation. Their phone is a game console.
How does that change the expectations they have when they
go to look for content? They would expect it to be more
interactive, more visual, more rich, they expect it to be faster. I
think you will see things like stories have emerged that play
into that model and are much more
full-screen. They are not scrolling-based. They have a lot of motion and
animation. And new interaction that is
touch oriented you will see that increase as users who are habituated to athlete treating their phones as game
machines. MONISHA VARADAN: We have a lot
of amazing questions we have been asked. What are you most excited by? MALTE UBL: Can I say two things?
I am most excited about amp-script. I think many of you
will be. It is a big change for AMP. I am excited not as much as a
web developer that want to use it buI am excited to see what it
does for AMP and how it changes how people use
the format. That’s, I think, actually really
interesting. On the other side, much more
forward looking, Rudy yesterday in this
talk talked about Bento AMP and I
think what he didn’t mention is this is really the first time we are rethinking the
architecture of the AMP JavaScript library from the
ground up. Technically a rewrite and literally the state of the engineering project
is the prototype and we are giver
giving ourselves a year to land it. I am excited because we
announced it here but haven’t done all the work which is great
because it is an open source project. You could see it
anywhere. It is happening there. I am pro-telling people about
these things but I am definitely excited to see whether that
actually turns out to work but I am also very
confident about it. I was going to lead with Bento
AMP too. With HTML there are all these tags you never used that are like random
document oriented tags and just stopped
having these features. Now we are in this mobile world where
everyone wants a nav draw or some tabs or basic carousel and
the like and you know it is kind of painful to watch developers searching on MPM
where you get variable quality with
amazing stuff there and some other stuff. You download something with 50
megs of dependency and this is a hellish situation. You get into
a world where the work that goes into building a
high-quality component that can be styled and accessible and every developer
shouldn’t be having to do that. I feel like adding that to come
along with things on the material and lot of things out
there in the community. I am really excited about that. And then portals for that vision
of I can’t wait for a world where I am sitting on Slack and someone
posted an URL and it is live thing in there and I can zoom into that world and gav navigate and get back to
browsing the web. If I chose one, I will chose AMP
Stories. I visited many different
countries and got to know more about young
users and how different they see with their phone. They do a lot
of search on YouTube, for example.
We really need to move toward the visual because that is where
users are living. Again, the AMP Stories is one
step forward. It is really excited to me.
Obviously, I Echo everything they say. Amp-script for me is
uncomfortably exciting but the possibility it
opens up is quite profound to make some
kinds of experiences on AMP possible that just were not
possible before especially in e-commerce where you can do it. Folks like Alex are doing it
making an AMP first e-commerce site. Things like amp-scriptamp-script
opened it up and make things a lot more
accessible. MONISHA VARADAN: I would
probably say amp.dev. Thank you so much for your answers. We have run out of time so we
have to wrap up the panel. Thank you for being amazing Panelists
and thank you for being an amazing audience. With that, we
have to wrap up. Enjoy the rest of the day and
enjoy the rest of AMPConf. Thank you. Thank you. YUSUKE USTUNOMIYA: We will
reconvene at 2:30. It is lunch time now.
CRYSTAL LAMBERT: If you see Ben, he is the one with the really curly
hair, ask him about the new courses up. Check them out. We will see you back here at
2:30. Enjoy. YUSUKE USTUNOMIYA: Awesome. Hello, please take your seats as
our program will begin in five
minutes. Hello, everyone. Just a reminder, while most of
the session is spoken in English, there is one section in
Japanese. If you need a translation
headset, head out right outside the main door and pick up one of the headsets.
Thank you. Hello, everyone. Please take
your seats as our program is about to begin. CRYSTAL LAMBERT: Hello, hello.
Welcome back from lunch, everyone. After all that talk about Bento
AMP, I definitely tucked in and I am feeling very full. How are
you doing? Still alive? Still awake? Still ready to go? Let me hear it! Thank you, thank
you. We have been hearing a lot of
talk about epail and how it has been launched and I am excited the next
session is Amp for Email. I want people to start thinking about
what is happening outsideicide of the box for what is coming
into our inboxes. Please welcome to the stage,
Aakash. — outside —
AAKASH SAHNEY:>>
>>My name is Aakash Sahney and I
am super excited to tell you about Amp for Email, what it is,
what you can do with it and how you can get started. I wanted to
start off by talking about email itself. We all use email for a wide
variety of communication needs every single day. We use email
for making plans with friends and colleagues, checking
out promotions from places we shop, getting the latest updates
from social networks, providing feedback on products
or services, many different use-cases people use email for
all the time. 1. 5 billion people use Gmail every month and 280
billion emails were sent every day. Email keeps us connected to a
bunch of things that are important in our lives. Email
has been around for a long time. A few decades at least. Over that time period, the web
has evolved going from static articles to dynamic interactive aps that
complex interactions. In the early 2000s no one
thought you could run a full spreadsheet
application in your browser but that is what Google Sheets is.
Email has stayed roughly the same. There have been
innovations to manage and processing but the contents of
email have stayed the same. Emails can include text, images
and links and nothing much more. The content is still static. It still gets out of date. Users
may be looking at inaccurate information and stale content. It is not clickable and
interactive like users have come to expect from
the rest of the modern web. Email has been around for
decades, it plays a central role in our
lives, during that time the rest of the web has evolved and email
has been left behind. The messages you can send still
contain text, links, and images, it hasn’t really kept up with
our expectations from experiences around the web. So that’s why last year we
introduced Amp for Email. Amp for Email allows email senders
to include all the richness and interactivity of AMP right
inside an email message bringing email in
the 21st century. They let you build clickable
interfaces inside your messages. Using amp-list and amp-bind you
can keep emails up-to-date so users
are always seeing fresh and accurate information when they
open the message. With components like amp-form users
can take action right inside the message. They can respond to a
questionnaire or invitation all from the email message and
without opening up a new tab in their browser. With all features from the
carousel accordian, email centers can build rich applications inside email cases.
A ton of new use-cases is possible. Amp for Email is
compatible with existing email programs and adds
to the overall standard versus relace placing it. A few week uzgo, we announced
Amp for Email is now available in Gmail.
Emails can include dynamic and up-to-date content powered by
AMP in their messages. We announced a number of exciting
emails from senders who had early access to Amp for Email.
They have started including AMP inside their campaigns and built
awesome features using Amp for Email and seen impressive
results. We will run through a few examples. We will start with commenting in
Google Docs as one example. Instead of receiving comment
notifications that go stale and require you to open up a new tab, with
the new AMP emails from Google docs when someone mentions you in a comment you
can see an up-to-date reply from the thread
where you can reply. Pinterest has
made a way to save new ideas to boards. When Pinterest sends you a
recommendation, you can browse them and save them to whatever
boards you like all without opening up a new tab
in your browser. Ecwid makes easy to brows and
shop for sales. Indeed is a job search website
that has a new AMP powered job alert
email. Their new AMP-powered email
fetches the latest recommended jobs and
inserts them into the message so the user sees jobs that are relevant, still
available and personalized. Indeed has observed two time the
clicks on job alert emails compared to
the static equivalence. Pretty massive improvment in the
key metric they measure for interactions with their emails. OYO is a popular hospitality and
travel booking company that sends user
ideas. You can see the user browsing
through proposed accommodations and they can see user ratings, Wi-Fi, and whether
breakfast is included and they can make the decision about
whether to book the stay. The messages for super school
and more useful and also in a pilot OYO
ran they are seeing improvement of click through rate and
conversion. 57% higher click through rate
and 60% higher conversion which showcases the massive potential
when you add interactivity and up-to-date content to your email messages. That is
just a handful of the senders who are adopting AMP for email
already. Many more are coming soon. It is very early but we are
excited about the impact Amp for Email is having on use-cases that users
experience every day and bringing real measurable
values to eemail senders who adopt it.
We knew when we created Amp for Email, we had to engage the email
ecosystem to ensure AMP e-mails can be delivered and tested
using the right tools. There are a lot of pieces to the
puzzle. Many centers used email delivery
services, they use a service for testing epails to make sure they
render properly across devices and clients and
to have the most impact possible AMP emails had to be compatible with as many
email clients as possible. We have excited to share we
partners with the email delivery services sendgrid, spark post and Amazon
AWS Seb Grubbs. Litmus is a popular testing
platform and now supports Amp for Email. And last, we engaged with other
providers. Amp for Email is supported in
Gmail and mail.ru and is coming soon to Yahoo! Mail and Outlook.com. With Amp
for Email, you can bring engaging experiences to your
emails, shifting them from being static flat messages to dynamic interactive
mini applications. Your emails can fetch up-to-date information and allow users to
take action right from the message. Amp for Email unlocks a whole
new use of range cases we never thought were possible. We are also seeing really
impressive results. Not only are we making experiences more useful for users they are also
having a massive impact on the effectiveness of email
campaigns. And a bunch of different
delivery tools like sendgrid, spark most and
litmus and available in two email providers and coming soon
to Yahoo! And Outlook.com. We can’t wait to see what you all
build using Amp for Email. You can learn how to build your
AMP e-mails, test your AMP emails and register to send your
AMP emails to Gmail users at the link on the
screen. For the rest of the session we
will focus on sharing how you can get started. We will start with a session
from Filip from our team. Then we have a few other partners
that will be coming up to share more complex tips and tricks for scaling and
productionizing your AMP emails. I would like to invite Filip
Stanis up on stage to walk us through some
examples of Amp for Email. FILIP STANIS: Hello, everyone.
My name is Filip Stanis and I am a partner developer advocate
working on Amp for Email at Google. You heard from Malte and Aakash
just now, Amp for Email is here but many are wondering how can I send an
email that relays AMP? Good news. That’s why I am here. Like
every good AMP development we will start with going to
playground.amp.dev. The first thing we are going to
do here is containing the format for Amp for Email to the top left corner. This gives us to end to email
boilerplate. Let’s break down this boilerplate a little bit. This is the minimum amount of
markup for a valid AMP email. First thing first, you have the
HTML tag with the AMP email attribute. In
this case you are just mentioning this markup is an AMP
email. Next up, we have the meta
character set. You will be using the utf-8 and
this is mandatory just like it is for the web. Next up we have the subject and we don’t need that.
Coming up next is the AMP Runtime. This is the exact same
one that you use for the web. This is the same AMP Runtime
that powers emails as well. Up next, we have the AMP for
email boilerplate. Again, you note it is similar
but much simpler than the one we have for the web. The only thing
we need to do is make sure the body is not shown until
it kicks in. Finally we have the start tag. This is where you can put your
custom CSS. We are putting margin on the H1
tag. The most important part of the
email, of course, is the body. One good thing about using the
AMP playground is it is real-time. We can make this email to say
hello to everyone. This is a talk about email. What I am going to do next is
open my Gmail account. What I prepared here is an email
that uses HTML. It just has single markup that
we will use to get started. You see a couple images, some
text, nothing special there. We will use this as a starting
point for AMP email. We will upgrade this email to be a bit
more dynamic. The way we have going do that is
go back to the AMP playground and I will use the markup I used to create this
HTML email. And this looks quite similar to
what we had in Gmail. Now, some of you might notice there is a
problem here. We have a few of these red
circles and there are some errors here. This is not valid
AMP. The culprit is, of course, the images. We are using HTML images so what
we need do to is change them to AMP images.
It is a simple fix. We already have a widing and height so all we need to do is replace the
image with AMP image and let’s not forget to close the tag.
Another thing I want to bring your attention to here is all
URLs are absolute. We cannot use relative URLs in
emails. This is simply because relative
URLs don’t make much sense. Keep in mind all URLs need to be
absolute when you are making emails. Once we have done that,
we are back to having this email that we started from but now it is valid AMP which is
really good. We can move the CSS from the
start attribute to the start tag up
top. This is not really necessarily
but it will make the whole thing a little bit more manageable. We will give this div a cross
and move the CSS attributes we have up
top. There we go. And we might as
well give it some padding while we are at it
because why not. And yeah, this is now a valid
AMP email. Unfortunately, it is fought —
not very excited. One easy thing we can do is add
an AMP accordian. We are following the correct markup. We
have sections and headings. All we need to do is wrap this
whole email inside an AMP cordian. We are using an AMP
component here and need to make sure it is included at the top. Luckily the AMP playground did
this for us. Nothing else we need to do here. This seems to
work. Let’s try it out. We can try the preview on the right and see if this accordion collapses. You have a working accordion. We
should take this to Gmail. To do that we will use the Gmail
AMP playground. To use it we can navigate to
AMP.gmail.dev/playground. This is the tool made by the
Gmail team that is similar to the AMP playground. You see it
is quite similar in appearance and there is a preview and a
markup, but one thing that is different about it is the send
button. The send button allow us to
immediately send this email we drafted to your Gmail account.
It will use the account of the current logged in user to do
that and always sends the email to us. Let’s try it right now.
Let’s go back to the AMP playground. We are going to copy our markup.
Go back to the Gmail playground and paste it there. If we did it correctly, the
accordion should still work. Seems good. Let’s give it a better subject
line. Maybe photo album in AMP. I think we are done. Ready to press that send button.
OK. Now, if this worked, I can just
go back to my Gmail account. There is an email right there.
Oh, that’s not good. That’s not an AMP accordion. If
you like to use AMP inside of Gmail, you need to be registered
with Gmail as an AMP sender. You can learn more about the registration process from the Gmail docs or approach us
afterwards in the booth and we can talk about it. Right now we
just want to try it out. There is a quick thing we can do. We can enable developer settings
for AMP and this will allow us to
render this AMP email inside of Gmail right now. Let’s do that. Let’s head over to Gmail
settings. The one we are looking for is
called dynamic email. You can do this by checking the
checkbox. After you have done this there
is the dynamic development button below it. Press that and you will see this
popup box. This is the important part. This popup box allows you to
type in a single email address. We will press OK and save our
settings. And if we have done everything correctly, we can open this
email again. It is dynamic. I will use this that has image
and descriptions, I will give it an
ID and height. Let’s stay 500. This will fetch the JSON end
point and it will allow us to render it. The template we use here is
pretty much the same one we had. We can wrap the rest of it if a
div. Put it in an image. Set the course, we are going to
need width and height, of course. And as you can see, this is all
up-to-date on the recognize side. We have nice images here. We just need to add the
description as well. OK. This looks good. This looks like the
original email we had except this one is rendered
using amp-list. Let’s do another thing. Let’s put a button up
top. This button will refresh amp
list. This can return random images with random text every
time. If we refresh, we will get
different results and we can get a different result every time we
press this button. We have original email but now dynamic. I guess all we need to do now is
bring this to Gmail.
You know the drill. Copy this. Go to the Gmail playground and
paste it and hopefully it looks good. Everything still works. I think we are ready to give it
a subject and tap send. We will use a different subject
so we can differentiate from the previous email we sent and we
press send. If this work correctly, we will see this email in our Gmail inbox. Let’s go back to Gmail. There is the new email right
there. And would you look at that. All dynamic. This email is rendered fully
from our server end point and all of
these images are loaded after the email is open. It is completely dynamic and
comes from our server powered by AMP using
AMP inside Gmail. There is one more thing. We can press one more button and
we will notice this will refresh the list. This email can be kept
evergreen depending on server content. We can update this email content
by updating our server. There is no reason to send another email with the same content
thanks to our good friend amp-list. I hope you enjoyed
this email. It is quite dynamic but it is also quite basic. It
is still just images and text. What I am going to do now is
invite on stage Michael from Doodle and Anirudh from OYO
Rooms. They have experience with this and useful things to say. With that in mind, I would like
to invite Michael from Doodle on
stage. MICHEAL WUERGLER: Thanks, Filip.
Hello, Tokyo, my name is Michael Wuergler and I am an engineer at
Doodle. Doodle it is company focused on
SUV solving problems around scheduling. You might be
familiar with the polling function of Doodle where you
supply options, invite people to
participate, everyone votes on a time that works best and from
there a clear winner emerges. Now with Doodle you can find the
best time to meet a person by using
the new 1: 1 meeting invites. Offer the times that work best
for you and either send a link directly to your guests or you
can send them an email invite. You can send this event to
multiple people and let them chose their favorite option on a first-come,
first-serve basis out. NO the meeting can be instantly
book on your calendars. Doodle 1:1 saved you time. We wanted to make scheduling
one-on-ones even faster. When the invitees open their
inbox they are greeted with a powerful dynamic experience that
is always up-to-date. This means the time options your recipient
sees are always valid. They are incapable of
double-booking your calendar and incapable of
showing you time options that have since
expired. For a schedule company, this is huge. It means the emails that we send
can be smart about scheduling and they can adapt to the
context of time. It means they can adapt to the
context of your booking. For us this is huge but it is really
the user that benefits because dynamic emails align with our
core mission which is to make scheduling faster and
easier. Dynamic mails can do
unprecedented things like decide which time zone you want to see
the time options displayed in. For a scheduling company this is
amazing. Because these emails are dynamic, if you already
booked the event you will only see the conformation email
instead of the time options because these emails are smart.
They know the context of things. What did we learn whether we
created this dynamic email? Let’s take a closer look at how
we built the dynamic features and how we are able to navigate around a few
obstacles when dealing with advanced use-cases.
First stop was amp-list. Your relationship is a little differentiate than what you know
from AMP development because amp-list
and Amp for Email have a few key differences. Amp-list component
does not let you bind to source in an email. Similarly, the form component
cannot bind to the action. The about to set the source
attribute is a very powerful AMP feature
but since it is not available in Amp for Email it is safe to say
this is where some of the complexity in your emails might
be introduced. Here on the left, you see an example of the single
AMP list and template that does allow dynamic binding to the
source attribute. This is where new data can be fetched and fed to the template as often
as you want but things can be slightly
more complicated when you can’t bind to source. You might find
yourself in a situation where you have the manage side
effects. Luckily, AMP handles all this complexity for you so
in the end it is actually quite simple. And don’t worry if you can’t
read this code, this is really just to
elstraight — illustrate the fact we were able to pull off advanced use cased with
a quite a little boilerplate. This is a testament to the power
of AMP. You can do a lot with a little.
Let’s walk the structure. We have three hoisted templates.
They can get complex because they are shared meaning they
need to account for the different states in your app
but hoisting means you can reuse and share. In our case we were sharing temp letes. By the way, using forms that you
can programmatically submit are a workaround and a strong pattern.
Submit a form whose hidden value forms the attribute and the form
can share a template. Finally, we have three amp-list
components. These happen to share the same end point for
data but are in different parts of our app. Here you see some
chained actions. You can do a lot of powerful and advanced stuff simply by
chaining actions together in AMP. The mean take away from this
section is that some marginal complexity can be expected
because you have to roll your own internal routing mechanisms.
And the chain side effects are probably the trickiest part to
manage but AMP takes away all this complexity from you and keeps things pretty simple.
AMP makes complicated things simple. You can quote me on
that. And let me emphasize, you can
still do a lot with a single amp-list
component. Our very first working demo of
the Doodle 1:1 email loaded
everything. It wasn’t until we introduced
time zones into the mix and needed to account for variable
height or variable length user supplied content that
things started to get a little tricky. Next focus for us was
responsiveness. Our misconception for amp-list
layout equals responsive attribute. The label response was
misleading because it means it will force the relevant
container to honor the aspect ratio of the required width and
height attributes. This is great for amp-image and
amp-video and fine if you know the height of the incoming
content but it is less than ideal when you are trying to build a responsive layout that
can handle variable length user supplied content.
This was exactly our program. The Doodle 1:1 email allows the
creator to make custom messages and they can be very long or
short. We had a tricky time fitting
these variable length messages into a container that needed to
have a fixed height or aspect ratio. First way you could get
around this is to set a really high height attribute that can
fit all of your content. This is an OK workaround if the
amp-list component is the last component in your stack like you see on
the left. Otherwise, the amp-list is
capable of clicking the contents of the element below it like you
see on the right. This is manageable if you are very
careful about the heights that you set. And this is just to
show why the clicking can occur. The component will take up the
entire height you set leaving you with this kind of clipping space below the components if the content you
supply is not big enough to fill the fixed space. If the amp-list components can
be the last component, or you know the height of the incoming
content, then you can totally get away with this option. Second option, we could use
scrollbars but no. Emails have always known how to
scale to its content size. We want to respect email as a
medium but don’t want to do
unforgivable things like put scrollbars within
scrollbars. The amp-list and HTML form can
share the same template. They are copies but the only
difference is the AMP list might have
responsive with fixed height and HTML is
naturally responsive. Swaping one for another is a pattern we
use a lot only when-needed. The main problem with this approach
is it only works if you make a network request. You remember
the slide? You can see how you can
programmaticprogrammatically submit the form and subsmit as a
shared template. It requires that network request but it does
work and it is currently solving problems for us on the more
extreme edge of things. It is a nice pattern. Currently given
all these contraints, we have considered the best of
all world scenario is to mix and patch these solution sets. Next we will try to fit more in
the initial AMP list that fetches the up-to-date data and swaps itself
out for a copy form. We found the clicking space
underneath the amp-list is totally manageable. Another area we spent time was
learning the difference between AMP’s
mustache templates versus the original
mustache template. You notice the top paragraph
here says if the person key does not exist or exist and has a value of null,
undefined, false or 0 or is an empty list or string, the block will
not be rendered. Given a key value with person
false, and a template where we will print never shown if the
person was set to true, the output we would expect to see is
the text shown because this part of the template would only
display if the person value equals true. An AMP in this case
will actually render the never shown text
because AMP mustache doesn’t read the value of the key to
infer truthiness like you would expect, instead it sees the
existence of the key as truthy. The bigger implication for us
meant to the server feeded needed to do conditional checks
and only attach if the value would
have been truthy. For us, the general rule of
thumb was a key that does not exist will
always be considered false in AMP mustache and it has worked
well for us so far. Next topic is an important one. Websites are evergreen but
e-mails are forever. Web apps have the benefit of continuous
delivery. So, new features and bug fixes
can be made instantly available to your users but epailss — emails are
different. You can’t change the front end
of an email you sent. Amp for Email let’s the content of your email be up-to-date. Every time
you open the email, fresh new content to users. What is fixed, though, is the
actual markup. The source code you had to type
that shipped with the email is fixed forever. You can’t change
that. The strong recommendation is
versioning from the beginning. This will protect you and
guarantee you will always be backwards compatible because your emails will be
expected to work no matter how old they are.
Versioning helps us not hurt the user’s inbox experience. Next
big consideration for us was tracking. I won’t go into too much detail
just suffice to say you can use tracking pixels and click
tracking on URLs the same way you would in a HTML email. I
know my slide says same as HTML but I meant to say same as HTML
email. And all your other meaningful tracking can be done
through the server. You are basically just taking advantage
of the fact your front end is in constant communication with your
back end and from the back end you just dispatch your
analytics. Those are really the biggest considerations for us
when creating an AMP-powered email. Other than that, it was typical
AMP development. AMP really takes care of all
these complications for us. Just a few bonus items. Use the AMP
playground. You just saw Filip demo it. It has built-in validation and
can send an email instantly for live testing and it can help you
prototype, test and troubleshoot your e-mails.
Next, don’t skip the test. I want to be the first to welcome
you to this new age where you get to start writing integration tests for
your emails. If you have hash development
equals one in your URL method you get
access to the print-state and this print states and helps
debug applications. This is not Amp for Email specific. This is
something you can also do in AMP but it is really nice when you
are building your emails. Finally, another big time, the
ordering of your MIME types matter. Plaintext, then HTML, and then
AMP it is said but due to a limitation
in some email clients we have to be
naughty and break spec to get the email working everywhere. This means that the MIME type order is plaintext,
then AMP, then HTML. Some of the email service
providers out there that are AMP-enabled are
aware of this and do this behind the scenes.
Those are the biggest take away in creating our dynamic email at
Doodle. We are very excited be apart of this process and we are
very excited to see the positive user engagement
that has come from the inbox. We are also very excited to see
what the rest of you do with this really cool technology. Thank you very much for your
time. I will now bring on Anirudh. ANIRUDH KHANNA: Thank you so
much, Michael. Hello, everyone. I am Anirudh and I work as a
software developer at OYO Rooms. We are a tech based hospitality
company where we enable users to book an
awesome stay with as less number of taps on the screen as
possible. You can mostly find me working on exciting web projects
such as Amp for Email, AMP in general,
progressive web apps and so on. This winter we had a lot of fun
experimenting with AMP emails and proud to announce we have finally
welcomed them into our production system. Before I
begin describing that, let me put forward points regarding
what issues we face with normal emails. So, number one, email with
dynamic data such as ratings, or room prices,
once you send those emails, there is
no way updating those dynamic pieces of
information. So, suppose a visitor comes to
OYO’s website and browses hotels and
makes a search and leaves without creating a booking. In those cases, we might want to
send an email saying here are
recommended OYO Rooms you left behind. The problem is many of
those rooms might be sold out by the time they open their emails. As a result, emails are going to
be obsolete. The layout options in emails are pretty limited
these days. They are limited when compared to your normal web
pages and limited when compared to the out of the box layout options that AMP can provide. All in all we can say emails
with dynamic data are like a may
flower. AMP steps in as the long overdue
revolution in emails that we as content creators, as email
campaigners, did not even know we needed. This elegantly solves
most of the issues we just mentioned because email is not just email any more. So, here is one of the examples
AMPHTML email that we created back at
OYO. What this does is it lists out some of the recommended OYO Rooms for a
user. You will notice when you open
the email, an API call goes and fetches the fresh data from your
servers so it can not get stale. The interactivity in the email
is off the charts when compared to a
normal HTML email. When you click one
of the items you have the ability to go to the
next screen, few hotel details and
you are not thrown to a new tab like
usual emails. Also, when you click on the
ratings, it pops up and shows the expanded view of the ratings which are freshly
fetched from the API, also. Let’s see a minimal version of
this code. This amp HTML markup to see what
goes into creating one of these
beautiful email experiences. Suppose you want to include an
API call into your email. You just pick an AMP list and
give it an URL for fetching the data and throw the data into an AMP template
and you can use any number of
interactive AMP components to create an interactive email. It
is as easy as that. Your AMP skills come in handy. Moving on to one of the most
specific examples, the one where you click on the ratings and it
pops up and fetches the data from an API, and this is
happening inside the data which just came in from an API itself.
How do we do that? Again, there is a parent AMP list which
fetches the hotel details. You have all the details in the
template along with which there is an aggregate rating which is
also a button on the click of which you can
expand the rating detailsism and you will notice the button is actually in AMP
form. The form has that end point
which can fetch the rating details from
the API. On the click of this button, two things are
happening. For one, the form is getting
submitted and you can also see that there is an update in the state so that a
pop up can be opened. Once youridate — once your data is here you
can use your imagination to show them however you want. This is
awesome. But you should be asking
questions like how secure and robust is that? I would like to
say API calls only go to the sender domain. We also have no chance for
adding any external trips into the AMP email. Only AMP
components are allowed. And we have graceful fallbecome
to plain HTML in case your email clients don’t support AMP
yet. Here is the great part. We actually did a pilot program
and sent AMP emails to actually users and the results were
profounding. 57% better click through rate
was experienced and what is better
is the 60.02 conversion rate for visitors coming via AMP emails. You can have the power of AMP
emails for intertough component. The power of making API calls.
Form submissions which can help us in modifying the booking of users,
maybe making a search or gathering user feedback right within the email.
Graceful fall back. The endless potential to create
unique solutions right within your
recipient’s inboxes many of you know
integrating AMP e-mails requires you to play
with a new AMP type. What steps do you need to take? Suppose you have your new
shining AMPHTML template ready. You need bring it into the your
email systems. You need to set its content type
as X AMPHTML and secondly and finally, you just need to attach that part into your existing epail —
email message or mind tree. If you want to go deeper, we
have script ready, this is a Python script, this URL will take you to it,
you can use it and refer it for sending
amp emails using SES. Thank you so much for listening to me guys and keep AMPifying.>>FILIP STANIS: Another round of
applause for the demos. We saw a little about how we could get
started with Amp for Email. We invite all of you to start
trying Amp for Email today. You can use the playground, you
can use the Gmail playground, and all of the documentation is available on
the links on the screen. G. co/devampemail. I invite everyone to visit the documentation on the screen and
get started with Amp for Email and start building new interactive dynamic experiences inside emails. I
wish you all the best. Thank you so much for listening. YUSUKE USTUNOMIYA: We are
rushing time. Going forward, two sessions one
after another. One is about AMP Cache and how
it is being used. It changes in 15 minutes. Please welcome Greg and Zach. GREG GROTHAUS:. Hi, everyone. My name is Greg. I am here with Zach bloom. The cache delivers fantastic
page performance but it has to
deliver AMP pages on the cache’s own identity not the original
authors identity. When AMP pages are linked on
Google Search, they use an AMP viewer that helps us achieve
prerendering and the fast delivery via AMP Cache. The
downside as you can see is the URL bar shows Google. com rather than any website you
would want to show. So, users prefer the correct
URL, but this has implications beyond just the URL bar. The browser works based on an
origin model and that origin model is affected by the domain
shown in the URL bar. A big problem here is cookies. These make session analytics on
and off the cache difficult to
unifyunify. Another one is course headers
which affect whether you can make requests across demands and
they get harder as AMP Cache is deployed. The list goes on.
Why do we put up with this? What is this privacy-preserving
prerendering we keep talking about? How does it work and how does
create the situation we are talking
about today? Prerending means the page you want to click on is
already ready to display. Imagine I search for the AMP
developer website. The result page looks something
like this. In the background, the search
page is instructing my browser to go ahead and fetch this page
on amp.dev. It anticipates I might want to
click on. Let’s say I do. I want to learn something about
this random, interesting project. Let’s see what happens
when I click. What I perceive is instantious,
I have the document to read because the document was loaded
and rendered before I clicked on it. Let’s say I didn’t click
that result. The privacy-preserving part of
this means the pre-render step didn’t
reveal private information about the user. The page loaded from Google’s
own cache and any network events have been
delayed. That includes heavy images, and
videos, which will load shortly
thereafter. This also saves the user’s
bandwidth. Only once the document has been
loaded do those resources get fetched. Unfortunately, if the
prerender page has been loaded from the AMP Cache its URL is
wrong. So we use a small origin
attribution bar at the top to help the user. Let’s go over why
this is the case. TLS also known as HTTPs requires
a connection processing private keys to that domain name. The area covered by TLS is
arbitrary. The AMP Cache can’t provide that real-time TLS connection as it
doesn’t poses prive keys for any domain
fames except Google.com. The AMP Cache must be on Google.com
because of that. This is an example of privacy-preserving
prerending. In order to preserve privacy we
have no choice but to load the document from Google server to
Google AMP Cache providing a buffer from the user and the publisher until the user has
chosen to click on a link and indicate
they are interested in the content. This set of constraints leads us
to the URL problem we mentioned at the top. Can we achieve privacy protected
pree loading while fixing the URL identity problem at the same
time? The way we are going to do this
with is a new collection of technologies
called Web Packaging. We believe it will enable prefetching while displaying to the user the
URL of the document author. In particular, we are interested
in a Web Packaging technology called Signed Exchange. Signed
Exchange provide digital proof to the browser that a document
delivered is not modified from what the author intended. This
allows a third party cache, such as the AMP Cache, to manage the
delivery of the Signed Exchange. When a browser sees this digital signature, it can display the
publisher’s URL regardless of who delivered the information be
it Wi-Fi or the original server. The result is a navigation to
the publisher’s own URL while
maintaining a privacy-preserving prefetch. So, I want to go into a little
detail what is required to implement Signed Exchange on
your own site. The first thing is you will need
a new digital certificate for your
domain name. If you worked an HTPS you have
seen this. The new certificate requires a
new extension called can sign HP. You have to provide proof you
contain the domain in question. If you have done this with TLS
certificates it is the same process. The only stipulation that is
issues these certificates is digicert. But you can search for cansign
http and you should find more information. It is important users are
searched regular searchers and AMP Caches
are served a Signed Exchange. You must be abe to vary the
content. This is similar to how with web browser would send zip
files. A samplesample site could be
found at AMP package.com. This is a standard example of a standard H P request and
response pair. It probably looks familiar. The only change when serving
normal responses for Signed Exchange is
add a vary header. It shows the website can vary
based on headers except in AMP cache
transform. The documentary is AMP as we know it. This will then send the HP
request advertiser that is capable of a Signed Exchange. The first is a simple except
header that specifies Hey I can accept
an application Signed Exchange. The second is a new header and a
Signed Exchange is preferred and conveys additional information
that helps the AMP packager aptmize the document it is
server. The server responds to the new file. Application Signed
Exchange as the content type. It is a binary format so there is
not much to see that is readable but the first three bites will be SXG. We have opened source the web
server. This implementation can perform all unnecessary
transformation and signing that is necessary. It is called the
AMP packager. It is implemented in Go and you
can run it on your own infrastructure and it can sign
and package AMP documents. Let’s look briefly at deploying
requirements. The AMP packager is a back end web server component and designed to
frontend reversus proxy. User requests would be operating
the same way. The AMP packager fetches the original AMP
documents from your backend, optimizes and signs them. A few other things to mention,
the AMP packager feeds regular updates, and it will need to make infrequent
outgoing connections to a ticket authority. As well as to CDNCDNproject.org. There is additional news —
sorry, at this point I would like to
introduce Zach from Cloudflare. I work at Cloudflare which is a
CDN. We sit in front of 15 million
websites helping protect them from threats and make them
faster. You have probably used Cloudflare today already without
realizing it. When we heard about Signed Exchange, this thing that Malte described
as the solution to the single biggest problem with AMP, we
started thinking. What we wanted to thing about
was is is there a way that we can solve this problem without requiring people
to do cryptoography, provision certificates and do all these
steps that are not particular easy. That is important because
we believe in the AMP vision. This idea it can’t just be
possible to build really great things on the web. It has to be easy and it has to
be accessible for everyone if we want the web to be great. We
started thinking is there a way we can solve this hard technical
problem not for one site, or 100 sites but for 15 million sites.
What we came up with is what I am going to show you right nowismou can turn Signed
Exchange on your Cloudflare site right now. If you use Cloudflare you are
probably familiar with our dashboard. If you don’t you will
become familiar with. If you click the speed button
which looks similar to an AMP logo in
an unintentional way. We were first. You scroll down and find the
section AMP Real URL and you turn it on. This the end of the
instructions. We will start doing the
signature back and forth with Google whenever
Google asks for an AMP. We enabled this yesterday during
Malte’s talk and over 2,000 people have turned it on. Five
times the number of people in this room have enabled Signed
Exchange and are doing it soon in the very near future. We would love for you to turn it
on as well. We believe in the future of the internet. We
believe in AMP as a part of that. We just really appreciate
the opportunity be apart of it. Thank you. [Applause]
How would you test your site in whatever way you set-up Signed
Exchange? We are working on adding better tooling in the
future but here is a few quick ways you can do. First pick a
browser. You need to be running the latest version of Chrome. 73
or later. It is a Chrome-supported only feature but we hope other browsers add
support. You can try fetching the page through the AMP project
cache. You will need to change this URL to replace your own. Replace dots with hyphens and
full URL without the protocol. If you open Chrome devtools
network tab you will see something like this as this
loads. It will show the resource being
loads from the AMP Cache as a type Signed Exchange and this
will be immediately followed by a request for a certificate.
Lastly, you can see the document is loaded once the certificate
has been verified, but since this requires no additional network request it is
loaded from the Signed Exchange. You can test this on Google
Search just like you would with your normal AMP pages. This can
take a few days as you wait for Google indexing to pick up the
changes. Once everything is in place, you see the page with our own URL. There is more documentation to
be found including details about all these steps I talked about
at amp.dev. Check it out. Thanks, everyone, for your time. Have a great conference. YUSUKE USTUNOMIYA: That was an
interesting talk. Next, Yahoo! JAPAN will talk about how they
installed Signed Exchange. Please welcome Hirohito Komada from Yahoo!
JAPAN. HIROHITO KOMADA: Hello,
everyone. I am the general manager of
development at Yahoo!. Is everybody enjoying the
conference? I am nervous so I am not able to enjoy it as much but let’s start.
Yahoo! JAPAN Signed Exchange is what I
will be talking about. I will talk about Yahoo! JAPAN’s works and Yahoo! Travels works and then Signed
Exchange technology areas will be talked
about by my colleagues and we will talk
about the searches. First, Yahoo! JAPAN, overall, what are
they working on. We are working on businesses all
across Japan. We provide search business and a
publisher business. These two businesses we have
been working on AMP in these two
areas. We have been doing more with AMP
and let me talk about the service
side which is Yahoo! Travel. Last July, Yahoo! Travel is now
AMP-ready. As a commerce service, we got a
great improvement. The people who supported us and
the MC helped us out. I would like to say my thanks to
all of you. However, there are issues. It’s
personalizationpersonalization. You can no longer use cookies
with you do personalization so login information and member services stuff can no
longer be done. If you can’t provide membership services on a commerce site that
is a big hit. So, we are not using AMP therefore
in the main areas of our services
business. Some people think it doesn’t
look quite right. But we still want to bring AMP
in as much as possible because it is a wonderful service. So we have been working on how
to do that by using Signed Exchange. AMP can be provided in the domain of the service so you can
use cookies and also provide membership services. We have been using this Signed
Exchange to try to fix the issues. Yahoo! JAPAN has started to work on
Signed Exchange this year. We have been working on the
platform and on the publisher side in
tandem. And in this February, Yahoo! Travel, and EQ has released we
will start working with Signed Exchange. We were the first in
Japan to do this. Let me show you an animation. It is going to
move. Right. It is moving. Travel Yahoo! Is using AMP. I
think you can tell. Google Search. Announced it released Signed
Exchange so with Chrome on the Android, do a
search, will you? But it is not doing what buggy
today I hear so we can’t display The
prince hotel but please go to that one. And lastly, from May, Yahoo!
JAPAN’s travel — these are the project status.
Yahoo! Shopping is now there as well. They have a stable of very
qualified engineers and they are very interested in bringing
Signed Exchange in and they are working on the trials. Or they are starting to. We want
wonderful opportunities for our users and Yahoo! JAPAN is
working for us. We like to work with all of you
to make everything — all of our goals
happen. Next, Mr. Ohtsu will talk about signed
technology aspect. SHIGEKI OHTSU: Cloudflare was
talking about we will be able to handle
with just one button. It took us a month to get the
system up. It was a February, the last half of February, when
we launched the exchange in Japan. There was some technical baggage we had to overcome. It is not a service but how we
would be able to — what kind of system
would be necessary for you to be able to build the SXG which is Signed
Exchange. SXG is just not limited to AMP. It is actually a wider sense. It
is a technology in order to change the web communications.
There are two use-cases for this. One is online usage. Like AMP SXG would be falling
under this. The other one is offline. For the online side, how they
flow, which I want to explain further
in more detail. First, we have a publisher, like
Yahoo! Travel where you have a request
from the client, then you have
signature and an SXG file format and for a
distributor like AMP cast server which will be led on to them. For the AMP Cache server, from
the SXG file, they have a certificate
and OCSP, information will be packed
together, and to be fetched by the user. The user would receive two of
these and see whether if the certificate is the proper one or not or within the
period or not. It will validate there ticket to
be able to display it. With this flow, the SXG and the certificate offline will be
exchanged. This can also be made. For SXG characteristics there
are basically five items from where and whom it is available together
with the SXG and the certificate can be
acquired from anywhere. It can also be used offline. Even if you don’t have network connectivity, the SXG can be
used and this is the issue we wanted to solve with AMP which is to show the
publisher’s URL. There are some other
restrictions binding elements for SXG. It has to be contents that can
be cached. If there is private information inside, it can not
be. It has to be a public cache and
the contents would be under SXG. That is valid for a short period
of time, also. It is different than HTTP. It
uses offline and doesn’t have to be on network, and so, HTTPS needs to be more strict.
It would be valid for seven days and need to be updated after that. And what kind of functions? How
will they realize? If you look at the inside you will be able
to see what that is. You can see at the top, the
begins has SXG1B3. It is a magic code. After that there is a fail back
URL after it is validated. If it fails it goes back to the
origin. So this is where it will be
certified and contents and body will come
in. It will not be for all the body
but only the header is what it is certifying against. So, the request response rate
for HTTP overall would be certified with this. The distributor here in the
middle, if they had changes to the body, it
will be prevent such and by doing this,
the browser can be safely able to
issue it as its own URL. This is our overview of our
systems. The explanation from what Greg
had made is slightly different but it is
comprised of four components. HTTPS proxy, SXG router and
AMPpkg and server. I would like to explain the components. HTTPS
proxy. It is not just limited to
travel. Pane have been consolidated
here. Communication will be terminated
here. An option, we have the cache
functionality. For the internal allocation
services are made. For Yahoo! Travel and AMP requests and any
others, the HTTPS would allocate them. Next, the SXG router. Here
we have a crawler to go and fetch the con content but we have to notify it
is SXG compatible. It is very AMP Cache transform
and the header that we feedback. Oh, that site is handling SXG
then we will put over that next time. The SXG that the crawler brings
over is AMP crash transformer header
will be integrating the fetch to cache
it. Then it will request to AMP
packager side. If not it would go to the AMP server which would
be providing AMP content. The other thing is there is log
and monitoring and other system related management can also be
made. Here is AMP packager. Here as we mentioned yesterday
there is a GitHub. This is from AMP contents SXG is
created and proviproviding. It is not just converting. It will be hand over to the
cache side. Another thing is with the certificate and the OCSC information will be handled
and created here. You need this because it will be
old or you may not be able to refresh. The invalidation data will not
be able to be output. There will be error issued if it
is not checked and deleted. So, SXG certificate is what it is
all about. The usual HTTPS certificate — you will not be able to use it
on the web server. Next month, there will be more
strict rules for the validity of the certificate will not be stricted
to 90 days and it will need to be
registered. This is a system we have
implemented. There are a lot of learning from this which I would
like to review those. What was good is that the
existing infrastructure we were able to minimize. The AMP contents almost no
change there. It is just inserting it to get
SXG. Where you have the crawler bot,
or the bot where the crawler was the
focus, you don’t have to worry about impact
to the user side. However, you need to have a
staging or taste environment was very
limited when we did this. Will the bot come to crawl and
pick up the SXG? Those things can only be known
after release when it is on the internet. This is something that
you really are concerned about when you are doing it for the
first time so that you have the crawler simulator or SXG
validator which you have have a tool to evaluate
and test these. Nextly, we’re going to watch out
when implementing to confirm the AMP contents whether it is the cache side,
namely cache control private and such cookie contents should not
be allowed. Something that can not be leaked in the header, make sure it is
carefully checked. SXG file is something that will be stored
externally. Even though it might be invalid
it will remain. Really be careful about the
security aspects. Another thing is some other
points I need to talk about which are
there is some AMP frame with the same
origin and became errored out. Also, redirection and error
coming out — between the crawler and bot
will not be good and we have to be careful about that. And lastly, topics moving
forward, certificate is for 90 days. The more services you have
handle the certificates will be a lot of work so we have to — we are going to try to automate
that process and setting up the CA is also something we are
working on and over the next few months, the software
and the transformer will be ventioned up upgraded so we are working on
that as well. — versioned. And Android and iOS terminals
have access to it but we only support
Android, so we need to thing about how to work on iOS moving forward.
When there is a direct access or new way we have to think about
what kind of infrastructures we should have ready. Lastly, we plan to implement
bundling and reporting functions. Next, we have Mr. Munakata talk about our work
from search. Yahoo! Search AMP works. Since November of 2017, we are AMP-ready and the organic search
results and AMP search results are like this. The AMP icon is shown here. And
Yahoo! Doesn’t have that icon. With regard to Signed Exchange
how does that work on Yahoo! Search is something we need to
keep an eye on when we talk about these
things. Signed Exchange can be checked
at developer preview on Yahoo!. We have a special URL over
there. So you can handle this then read
the QR code. We showed you animation earlier. I want to move — try to run
that in a developer preview fashion since
we have all of you here. Is it showing up? Look at the left side screen. Developer preview window. From there we will look for
Signed Exchange. We look for the L-Tower or N
Tower from the hotel and Tower.
It not showing up? It’s not displaying? OK. Sorry about that. Here. This is now a Signed
Exchange-ready site. In addition to AMP icon there is
SXG. Can you see that? Let’s click on that and see what
happens. The page came up very quickly.
Notice that first. The URL its travel Japan URL is going
showed which is not the origin URL.
Please, double-check that because it might be difficult to
see on this. Next, let’s return to the slide
and look at the Signed Exchange activities in more detail. Look at the sequence. Signed Exchange ready sites sites. This is like subresources. Everything is being shown here
in brief form. We have Chrome developers screen
shot so let’s look at that. This is the developer tools
search results that we were looking at
earlier. Yahoo! Travel is Signed Exchange-ready as you can see. AMP Cache gets red and the link
tags pre-fetch function is being used. This the actual HTML. The URL is also put in the href. Let look at the communication
for that. To the pre-fetch request, AMP is
returning a Signed Exchange response from the validated one. We get fetch more information
and it recognizes travel Yahoo! JAPAN and we can confirm it has
Signed Exchange on it. Subresource is set as a critical
resource here. And the browser reads ahead of
that resource based on instructions and you can see that some JavaScript
requests are read in and this finishes up
all of the preparations for the Signed
Exchange setup and with you link everything up this is how it looks like. Signed Exchange file gets read
from the browser and sub-resource comes
from the browser cache. You can see all that happening. Signed Exchange uses browser’s
basic functions to do a simple read to
realize fast loading. That is what we have been doing at
Yahoo! Search. Lastly, at Yahoo! JAPAN
we are user-first and want to provide services that solve the
worst situations/the problems, and in order to do that we
believe in Signed Exchange and we will continue to work on
the development of Signed Exchange.
Thank you. YUSUKE USTUNOMIYA: There was a
lot of technical information. It was a lot of teaching
materials there. CRYSTAL LAMBERT: Those slides
had so much great information and great
graphics. YUSUKE USTUNOMIYA: Yup. Here we will enter our coffee
break. From 4:30, we will reconvene at
4:30. This the last break, so, please,
stop by the tutorial and booths and speak to as many people as
possible. CRYSTAL LAMBERT: We learned so
much about Signed Exchange and email, so please take this opportunity take the last
bit of time to say hello. We will see you soon. YUSUKE USTUNOMIYA: Thank you. CRYSTAL LAMBERT: Hello, hello.
Welcome back from break, everyone. Glad to see so many
faces still here and excited. It is the bittersweet moment where
we realize we have had so many fantastic talks and the fact we
have had so many fantastic talks means we are starting to come to
the end. The great news is we have three
more still lined up. I am so excited to introduce our
next one. All the way from Milan Italy we
will have Cristian and Fabio and they will talk about how they motinized
their page by turning them into AMP. Monetized —
FABIO ZECCHINI: I am sure you enjoyed the coffee break. Unfortunately, the word we know
in Japanese is just one word so I hope with the
translation you will enjoy the talk. I am Fabio and here with me on
the stage is Cristian.
CRISTIAN RONZIO: Morning. FABIO ZECCHINI: OK. It is a real
pleasure to be here. By the way, we are probably the
only European based founding company presenting on stage. I
think it is interesting not just because we are sharing with all
of you how we implemented Vue. js pages but we have a great impact
on our company using this kind of technology. Let me give you a lit of review
on Musement. It was founded six years ago. The initial idea was to create a one-stop commerce to buy museum
tickets all around the world. Then we launched in Tech Crunch New York May 2013. We are celebrating being almost
six years old. We fundraised when we came back
and started the company. We are now 160 people in the
company, 25 different nation
nationalities. We have offices all over the
world. Right now we are not just
coverering cultural events but now sports
exhibitions, food and wine, and wellness and live. We have been aquered the last
year, September, by the Twig group. Because they are very focused on
the business and they requiring us
to re-create all the digital TouchPoints within the company.
Right now, within the group we are more than 70,000 employees covering more than 150,000
products and 500 cities in the world and we have approximately 21 million
customer per year. Since the very beginning,
Musement has been a data driven company
meaning everything decision we took for the company was based on data from
our team and from different business units of the company. We received an input from the
marketing team where we had an issue a couple of years ago. The
issue was about specific device channel. It was mobile. Keep in mind that 70% of our
revenue and traffic was coming directly
from Google ads so we have been able
to track every single touchpoint on our
customer journey. We identify a gap just for the
mobile devices. Receiving this information from the marketing
team we decided to tackle this kind of issue. We first had to decide which
kind of goal we want to achieve. The first one was OK, of course,
make it easier and faster for our customer and navigate on our web page and
decide between different events and
activities. We also wanted to improve our
click-through rate and conversion rate because of the
business impact we have in this kind of KPIs. But we also wanted to improve
our ROI, return of investment, and
margin. First time I heard about AMP
pages was back in the day during a Chrome
Dev Summit in San Francisco three years ago. In that moment, AMP page were
being developed for publishers mostly. We were not able to replicate
our platform on AMP pages but a few
years later, one and a half years ago, because of the new deployment with the
new integration and new feature, has been updated on the AMP technology,
we tried to — we decide today take this technology to tackle this kind
of issue. With that in mind, we decidedecided to challenge
Cristian and his team to create AMP pages on our platform and now I will let
Cristian explain how we did it. CRISTIAN RONZIO: Hello,
everyone. It is a pleasure for me to be here in Tokyo. You have an amazing city. It is something that never ends
when you look at it from the top. Congratulations. The first AMP release. The first AMP we released as a
lot of interesting things to consider
because Fabio made the challenge and we
accepted it. In Musement, once a week we have
a whole day to research, to spend
time making experiments to find new solutions. We call it tech
Friday so we don’t have to publish anything in
production. We don’t develop to the product
itself. It is just research. In that context, I started to
think on the right way to make these AMP
page prototype. So, since we usedused Vue. js for our conical website,
which is a JavaScript framework like React
and the frontend team is familiar. Most important, we wanted to
reuse what we already had for the canonical
website. The first concern was can we use
Vue. js to generate AMP pages? Is there anything specific for
AMP? The answer was no. We should have created our own. OK.
Tasked with this constraint. We wanted to use Vue.js. We decided to share this idea
with the creator of the framework. In February, we went to the Vue. js conference in Amsterdam,
another amaing city. We had the pleasure to stay with
Evan on training day and beside looking
under the hood of Vue.js itself, we had the chance to tell him about the idea and the idea to
generate AMP pages using the framework. In the end, our talks were
positive despite what we could not have
used. I am talking about the
client-side reactivity. We could have used the great template
engine of Vue. js and the service side render
model. So, the morning after this
training day, well, to be honest, after
an amazing night in Amsterdam, you
can imagine, we started to code our
first Musement AMP page from scratch. First thing is first, right, we
start by writing the basic AMPHTML. We plug it to the
renders creep. Done. Easy. Since JavaScript is not allowed
in AMP, well, was not allowed because
yesterday I heard amp-script, but at that
time was not allowed, we had to remove
the web pack step. We had to create the client-side render.
Remove this step. No band for client-side. By removing it, we remove the
client-side activity listeners, data bindings and so on, thus we
have a static page. Just a static page with AMP on
board and we can start work in the
framework with this static page. By coding the very first version
of our AMP page, we soon had to take
one of the most common tasks in the
frontend development, and I am talking
about reuse components. Our UI building blocks. The snippet you see on the slide shows the canonical
approach. And once you fetchfetch data you
have to item and it works on server
and client-side. When you navigate between pages
in single page mode, the navigation
and the component is the same, but the
client-side canonical approach doesn’t work implementing AMP because on
server we can use the Vue.js item
component but if we want to hook the user interaction on the
client and maybe apply the least item on a
load more action, for instance, we
have to use Mustache templates. It is another version of there
same component. This was the problem. And how we shape the rendering
process. Since we use VSseeks and node. js we just need Webpack with babel transpiler. And the video loader customized
for SV in order to put a head tag on
the page instead of using the external
CSS which is an AMP requirement.
We define a couple of routes. Here you see. With the view component to
render for that specific page and a set of middleware functions to get
remote remote — route data and set the
cache. The last function the most interesting one. It is the one which outputs the
page using the view server render
module after injecting all the data in the template context. We
did it in the end. A couple of weeks of work. Everything seemed fine.
But the showdown has arrived and we had to branch with all this
work with just some fine-tuning tasks to do. In Milan, in Italy, the Google
team runs an event called Google AMP
and Speed hackathon which is an end zone workshop
where frontend teams xing from various companies try to work on
their products to improve the performances with
the support of Google team and
Google experts, if needed. This gave us the chance to close
the Musement AMP and push this work
into production that day. This was the result. Since it was a con tex — contest, we won the first
prize. The venue page, the page Fabio
was talking about, Fabio, if you
want to tell them about the inside of
the page. FABIO ZECCHINI: Pretty amazing.
Thank you, Cristian. Let me just share some insight
and what happens later. We have been able to create a
codebase that is very lean. We created 15 AMP pages of our
top destination attraction page and
with our marketing team we have been able
to run A-B testing. After a few weeks, we decided to
implement the product page and what we call event page. This is
how it looks. By the way, one of the major
constraints on our side was to have future parity between the
canonical website and the website, of course. Then the purchasing process is
on the canonical website. Let me just show a video with
the result of this test campaign. FABIO ZECCHINI: Pretty cool.
[Applause] FABIO ZECCHINI: Thank you. So, here are the main takeaways
I want to share with you. First, OK. Of course you can find all this
in a case that is totally already
published with Google websites in
different languages. This is the English one. But the
make takeaways are the following. We have been able to
improve the performance and speed of 70% compared with our
canonical website. In a couple of weeks after the test, we have
been able to deploy because of the technology we use more than
30,000 different AMP pages across the
product page. That is the most important thing about the
business. We have been able to increase
27% our reserve new per visitor. That is one of our most
important KPIs. And a 50% higher conversion rate. On top of that, here is another
thing I want to mention. We also start seeing a side
effect. Very nice side effect. The fact that we start ranking organically on SEO because the pages load
very fast. So, what’s next? We are
improving our product and AMP pages but now we want to go
ahead, and of course a new features have been released this week, we are going
to implement amp-script and payment. In the meantime, we
also start looking at creating a new framework
emerge AMP pages. It was another trial for the team to work on
because we want to be ready and we want to be top of technology
on our platform because the idea is to
provide always one of the best experiences possible. Cristian, tell us how it is
doing. CRISTIAN RONZIO: Thanks again
for the challenge, Fabio. FABIO ZECCHINI: Not boring at
all. CRISTIAN RONZIO: Never. The idea is to create a
progressive web app using AMP. You have two option at least two
option to create this kind of
application using AMP. The first one is to create a
full progressive web app in which the AMP website is the
progressive web app itself because all the pages are
AMP. The second one is to create a progressive web app using AMP
pages to warm up the cache for the
canonical pages. OK? So, this is what you can do with
the AMP in service worker installer.
So, I made a prototype. Another one. This time I have used Vue. js and using Nuxt when is the
equivalent of Next.js for react. It has zero configuration and
server-side rendering is already working out of the box install.
I decided to use this tool. What you are looking at on the right
is a progressive web application. Progressive web AMP I call it
because it makes sense. It has a service worker. It is a news reader client. There is a website — hacker
news PWA. There is a website called hnpwa. It leads band
application paid with different front end frameworks. Reported score comes from
lighthouse. As you can see, the very, very
first and dirty shot performs very well. 99% on one Android. To give you an idea what is
inside a PWA in AMP, I can say that it
provides the bake basics. AMP boilerplate, client side
bundle removal using Nuxt. Handlers like canonical and
AMPHTML, links. A convention to use the mustache templates without clashing with
the Vue.js template in double curly braces. And of course, the Nuxt server
Middleware convention because you should work with that data. The news is that we also
published these recipes. These are recipes so I think I
can be the amp-chef. If you want to contribute to
improve it, yes, welcome for feedback,
pool requests and so on. So, thank you very much. That’s
all. Thank you very much. [Applause] YUSUKE USTUNOMIYA: It was a very
interesting session. There were some interesting point of how they were using it. Service side rendering which
isn’t limited to AMP case. I believe that is a technology
everybody is looking at it from and also full paint and speed
index and things in order to improve that but the JavaScript
that was on the front end we tried to limit that and try to let the
HTML be created on the server side and it is faster to do
that. I think that is the background to this. And they did
all this in AMP. So it is a very good example, I
believe. And another thing is what I
thought was impressive is that using AMP,
PWA is obviously should be there. So, we taught which one should
be used but there is something team wise that it might be confusing but it is
actually using AMP and also to be able to create a PWA simply
and I think it was clearly shown here. With that, it is another CMS
subject and we have to also — who uses
WordPress here? 40%? 50%? You better be excited for the
next session. With Google IO and Chrome Dev
Summit and AMPConf. We have an update. We have the latest information
for you here. Question. Building AMP for sites the
WordPress way. Please welcome Alberto and
Jeanny from Google. ALBERTO MEDINA: Hello,
everybody. This has been an awesome year for the AMP project
and one of the areas we have made a lot of progress has been
on building AMP content creation in the WordPress platform. As you know, WordPress is a
content management system. It is a software platform that
adds layers of interaction on the web
to facilitate the creation, management, and publisher of
content. WordPress is one of the biggest
CMS layers out there and today about a third of the web is powered by
WordPress sites. First, content creation in
WordPress falls into a spectrum where on
one hand we have a fully manual process where we, as developers,
do all of the work. On the other hand, we have a
fully automatic process where the platform with core and
extensions does all the work for us. The reality or what is possible
today is a balance point somewhere in that spectrum where a lot of the
process can be automatically generated and there is still
part of the process that requires developer intervention.
Now, the exact location of that point depends on the status of the
ecosystem with respect to AMP
compatibility and as the ecosystem evolves with time,
that balance point is going to move further and further to maximizing
itemization and minimizing developer
implementation. The official AMP plugin for
WordPress is an ex tension to the
WordPress platform that plays three main goals. It automates large part of the
process of iterating AMP content on the
platform, it provides developing tooling and guidance for helping
developers on the parts that they have to do themselves, and it also acts as
a monitor and enforcer as well as
sites evolve to maintain AMP com
patibility. On the automation part of the
plugin it provides four parts. The first is integrating the AMP
specs so it becomes a WordPress
validator allowing to identify and
contextcontextualize information. In WordPress, you have widgets
and blocks. The WordPress plugin hooks a
functionality into standard mechanisms in which content is
created in WordPress and generates compatible components
instead whenever possible. Now, there are parts of the code
that WordPress generates that could be generated also in terms
of AMP compatible components but cannot be done during template
rendering. For these cases, the plugin takes the output of the
template rendering phase and puts it into an output
buffer and parses it into a DOM document
and then applies a set of processing and
conversion tasks. At the end of this functionality, the end
result is a piece of AMP content that may, or may not, be
compatible and valid. Depending on that outcome, then
the plugin triggers one of several strategies that aim at
minimizing the probability that AMP content is
going to be served. Now this functionality has to do
with the system generation part. We don’t have to worry about it. We have to focus our attention
on the workflow for generating AMP-first experiences in
WordPress. In this part, this is the part
related to developer intervention. The first aspect
we need to understand is how the plugin intugreats
with the WordPress template system. In
WordPress the look and feel of sites is defined by a collection
of templates that when combined together form
what is called had theme of the site. The plugin can be designed
to interact with the underlying them of the sides in three ways. In native mode, the AMP
affectively makes AMP the framework of your site. Templates of our site render
only AMP responses meaning your site is
AMP-first and the canonical URL is also
your URL. There may be cases in which you
cannot make all the content of your
site AMP compatible at once for all your content types. In those cases, you have the
option of opting out of AMP for certain part of your site, or you can take
advantage of the plugin transitional mode. In
transitional mode the plugin also reuses the underlying
templates of your theme but in this case it renders both a non-version of the content, and
a non-AMP version of the content, and you as the
developer makes the decision on what goes in one or the other.
Notice that this mode is called transitional because it is
intended on providing you with a migration path that allow you to
progressively expand AMP compatibility of your site until
you get to a point in which everything
is AMP compatible and you can switch to an AMP first strategy. In this case, for example, the
sizes are exactly the same except for
the text-to-speech widget we had on the non-AMP version we were
not able to fully convert and we want to
have it as an accessibility feature. There may be cases — both
native and transitional mode depending on the team you are
using requires some developer work to make it fully AMP
compatible. There might be cases where you want to provide
experiences through at least some content on your site, but
you don’t have to resources to invest in
the development required at this moment. In these cases, you can take the
plugin reader mode. In reader mode, the plugin
generates content using separate templates
that are simple, they are light, they are neat, but may not match
the design of your underlying theme. This mode is useful to provide
basic AMP experiences but we don’t recommend it because it is restrictive and
given that a sign pass is moving
through a transitional or native mode is getting easier and
easier there is no reason to stay in this mode for long but
it is an option that is provided. We understand with
this how to interact, how the plugin interacts with the template system of your
site. The next step is to understand
the development workflow or how do
we go to making sites AMP-compatible in
WordPress. The first step is identifying
any problems your site might have. The second part is
contextualizing those errors. It is important to know where the
errors came from so you can go and deal with them. And finally we need to amplify
the markups so the validation errors
can be eliminated without compromising the visual identity of your site. This screen shot here gives you a glance of how
content creation looks in WordPress. The WordPress editor
is a block. Everything is a block. The blue rectangle is a custom
HTML block and we have put a piece of content in there that
is not AMP-valid. With we try to use this content, the plugin
identifies the error and immediately flags it in context
telling us there is something wrong with the content you just
created. It also offers us information on
the top telling us that we need to
investigate the issue. In this particular case, it is
very easy to see the error of the
context because we created it and we have it in front of us.
But in WordPress, content can be created in many ways and contextualizing errors
can be a difficult task. As I mentioned, the plugin hooks
itself into the standard content creation mechanisms of WordPress
and as the markup is generated, it
annotates it with HTML comments. At the moment the validation
error is encountered, the plugin walks
back the DOM tree until using the HTML
comments it can determine the particular source of the error and some contextual
information for that particular problem and creates a validator error
and stores it in the database to expose it
it the user like we will see n minute. Once the plugin has identified
or contextualized the error the next part is what do we do with
them? The plugin can be
configureconfigured in two different ways. You can configure to do
automatic sanitization. This doesn’t mean that the plugin is
fixing the area. It is just removing the
offending markup so the page remains valid. We need to make sure the
functionality or the visual is there. Or you can configure the plugin
to do manual sanitization telling it
to keep the offending code because I don’t have a solution and the functionality
is important to my site like the text-to-speech. The automate faith of a
validation error or the markup of an error
is your decision. As a developer you decide to
either accept the plugin action which you are telling the plugin
it is OK. You can take that markup away. I don’t need it. It
not essential for my site. Or no worry, I have an AMP
compatible. Or you can say no, let’s not have AMP at this
moment because I need that on my site. The plugin puts all these
capabilities at the fingertips of developers
via a compatibility tool that is accessible in the main screen of your site. I will not go into the details
of the tool too much but it gives you
all the details of each validation error and the status
of the plugin, it was accepted or it was rejected, it tells you
the source of which error was a plugin,
which plugin is causing a problem, and what is the error
type. Is it a CSS error? HTML error? JavaScript?
And so on. Then you can interact with the errors exactly with
this UI. As a developer you can decide
what to do with the errors there. We have a very good idea of the
capability plugin. Let’s put everything together going over a simple but real world
example of how to make a theme AMP compatible.
Depending on the team, the amount of work that requires to achieve
these may vary but this example is not too
complex but it gives you an idea of the workflow you have to follow to make your
theme AMP compatible. The starting point is a baseline
theme. It is a theme we have tested that we want and it is
important that it has functional fallbacks so it works properly
when JavaScript is disabled by the browser. We are starting from a good
place. This theme is the 2013 classic
simple WordPress theme with a side identity section, you have
a search box, you have a hamburger menu when you are in
this certain form, you have images,
you have gallery, YouTube embeds,
widgets, typical thing you have in
WordPress content. The first step is we install and
activate the plugin. We go to the screen, go to the
settings and I am going to configure it
in transitional mode because I want to move to AMP first. I will keep the errors there to
see how they behave. Then I will save
the change and the plugin noifies me it has identified
issues in my site. We go and pick one of the modes.
We can access the AMP version from the main screen.
Immediately the plugin tells us this is not valid AMP. We want to go to the
compatibility tool to see what is going on. At this points, we see we have
eight errors. Here we can see that the plugin
is showing the AMP is disabled for the particular post because
you don’t have valid AMP. I will give you a quick summary
of the errors here. If you conson straight — concentrate on the sources
you can see there are two CSS errors
introduced by there team. They are not related to view
port ad rules that are easy to deal with because they are not
needed and we can wipe them out. Then we have the following four
errors are JavaScript errors that are at attributed to there core
platform. We vethat information there and
at the end we have two JavaScript
errors that are triggered by JavaScript files.
This is probably the most important because that is the
team developer put the functionality they want there.
Now we have a good idea of what is happening. The next step is
we are going to isolate the errors to see how
they affect my side. The way to do this is that you go and you accept all the errors
causing the plugin to remove all the
offending markup. Then you can see how it changed
and now we are going to use the preview capability to see how it is behaveng. Now it visually looks
the same. The search box works. Let’s go to device node and see
if everything works. Search bar works but this not
working. This is telling me one of the
markups the plugin removed had the function that implemented the hamburger menu.
Next we need to go fix the errors. In this particular case, first,
let’s get rid of the viewport add
rules that are not needed. I will remove them. Then I will go to the functions
PHP file and create a function that tells me if I am rendering
an AMP response or not. It is called 2013 AMP end point. I am going to use it to wrap
around the pieces of code that are in injected in the
JavaScript files in the theme and I am going to prevent that
from happening if I am rendering an AMP
response. Finally, we are going to solve
the hamburger menu problem by telling the plugin this theme
supports AMP, we pass the AMP parameter, this is like a
standard function in WordPress, and then the next parameter, there is the
plugin this thing is operating in
transitional mode. Then we use the not menu toggle parameter to
pass information to the plugin that is associated with the markup that contains the
navigation menu. What this means is that most
things have some kind of implementation
that handles the hamburger menu. We put functionality in the
plugin to implement the same functionality in terms of AMP compatible
components using amp-bind and then we just told
the plugin this is the face of the navigation menu I want to
deal with and it does it automatically for us. The next step is to see if these
things work. We go and do the recheck and fingers crossed it works.
Restore. Everything looks fine. Trust me, I check all the
functionality. Then I have valid AMP. This is good. Both device mode and the
hamburger menu is working. At this point, I solve all of
the errors for the post so the non-AMP and AMP version are
identical. I don’t have two versions need so big day. We change this from true to
false and in that moment you have an
amp-first site. With this, it gives you a good sense of how use the plugin and I would
like to invite Jeanny to give us a taste
of how the plugin has been used in the
wild. >>>>Publishers are constantly
challenged to upgrade their winnings. There is one thing you
should avoid. We asked our user about one
thing they dislike the most when browsing
websites. The majority of users vote for slow website. We are
not alone and a lot of studies show a correlation between speed
and bounce rate. The longer you make your user
rate, the higher the bounce rate will be. It is really imperative speech
should be the number one priority when it comes to upgrading the website, after
working with publishers not everybody is as lucky as you. Not everybody has the capability technical ways or bandwidth to
update their website and meet the
user’s feeds. Our goal is to democratize speed
and make it is available to all
users. Today I would like to share stories of publishers who upgraded using
our plugin and most importantly I would like to highlight work
from ecosystem employer like you that bring this success
a reality. First thing first, I would like to share a story
about Times of India. You know them as one of the largest publishers in India reaching
over 400 million visitors. They have a block website made of
WordPress and decided to test full AMP experiences on their
blog. Of course, when it comes to converting their page to
legacy code there is always unexpected challenges they have
to face as constrain and find a workaround for the JavaScript. In this, they leverage our
plugin. They managed to reach 59%
improvement in loadding speed and they
shared they see an up lift in pitch view within the first week
of implementation. If you would like to see the native mode in
action, I would recommend you guys to try and open Times of
India block. The whole block is powered by AMP. Next I would like to share a
story about jawapos. In 2017, they decided to go to
GitHub and launch jawapos.com. They realized speed and web
performance are crucial to win users. They decided to test AMP on the
transitional mode. They wanted an identical copy of
the AMP and non-AMP so they can do a
comparison. The AMP version has 10X lighter page and they reported a higher
revenue per ad impression by 38%. We are in the process of
thinking about moving to the native. We saw this in example in India
and I would like to share an example
of reader mode. Hello Sehat has a goal to profile quality health care content to
Indonesia. They are interested in AMP. Even
in reader mode, they are able to see user are spending time on
AMP pages versus the non-AMP pages. We are happy to see the suckss
and want to see this grow. We can’t do it
alone. We need ecosystem players like you to take part and
democratize this. I would like to celebrate
contributions from those who brought the
vision a realality. First is XWP. They contribute in commercial
and the ecosystem projects. I would like to give a shout out
to Ryan and Mina and friends from
XWP contributed a lot. We have been collaborating with them to bring the latest development of
AMP into our plugin. I am really excited and I hope
more and more ecosystem employers like you will join us.
Not only that, as an agency, they also build solution for
their client. They have been leveraging our
plugin to upgrade their name to most
recently nova entertainment from Australia. They also use heavy and reduced
loading time from 8 seconds to 3
seconds. Next, I would like to introduce
Setka which is a technology company behind the Setka editor
plugin. Setka editor plugin is what you
see what you get pitch builder that
makes it easier for brands and build interactive content
without coding at all. They decided they want user to
not only build beautiful content but have their content load fast and this is
why setka editor integrated their plugin
with the AMP plugin. They posted this solution to a
client, real-time editor, who happened to chose the
transitional mode. As you can see, the AMP version
look equally beautiful, if not
identical, but so much faster on the mobile and
the desktop. And moving on, I am excited to
give kudos to wp engine who is
joining us. Stefan and Corey, can you wave? Can we give a round of applause? Wp engine is a hosting provider
but build genesis framework which is a popular team
framework in WordPress that has empowered over 600,000
domain and act as a customizeable foundation where
you can build WordPress website. A lot of creators utilize these foundations to build child
themes. They decided to impimplement on
their upcoming release in June. This will accelerate the AMP
accelerated team. Just to look at beautiful AMP compatible themes you can build,
here is an example. That’s it for me. Just to recap.
We have seen the importance of speed and how that correlates with
publisher’s win and that publisher with leverage
AMP to get that advantage. As developers here, I hope you will
be part of the ecosystem and help more and more WordPress
users to achieve fast website. With that, I would like to call
Alberto back on stage to share with us what is coming up next on the pupe line.
Thank you. ALBERTO MEDINA: That is super
awesome. I would like to give a shout out
to Catherine and Eager. Great work.
Really appreciate it. Certainly, we have gone a long way during
the past year but there is still a lot of road ahead of us to get
where we want to be. In a nutshell, we will be
concentrated here. It is four main areas. The first is staying
in sync with the continuous flow of innovation that keeps coming
from the AMP project. We want to make sure that we
stay in sync with the AMP project so the WordPress
community doesn’t miss one beat of it. The second area is we
want to expand the capabilities of the plugin in terms of the
level of automation it provides as well as the developer tooling
and guidance it provides for
developers to do their job manually. We want to make the plugin very
easy to use as part of larger ecosystem
solution that remove friction points to bring the power of AMP to the whole
WordPress ecosystem. And finally we want to engage
with the ecosystem players on building and advancing those
solutions. One more thing, yesterday you
saw from Juan and Han, the awesome progress made by the AMP
Stories team. I am very excited to announce
that AMP Stories are coming to WordPress natively via a new
capability of the AMP plugin that allows you to create fully
featured AMP Stories taking advantage of all the content management capables of
the WordPress platform. Imagine you are a provider, or a content
creator for a WordPress site, that belongs to a company that
— your job is to write content pages
for advertising and describing the
travel ad ventures that the company sells.
With AMP Story creation natively in WordPress, you can expand the
experience you will provide to your users by creating awesome
AMP Stories, embedding them into the content you are creating in WordPress and sharing them
just by providing a new URL in the
domain of your WordPress site. This an example site here. I want to go to Rome and this is
the AMP Story embedded directly on my page. FOU we want to —
now we want to click there and the user is imaging how the trip to Rome
will be, engaging, feeling excited and starting to make
plans and tremeing about it. At the end of the story, they
can go back directly to the site. This
is something very exciting because it is going to open up the kind
of experience that you can provide to your user. We don’t
have time to go over a full demo of the editor but we
created this time lapse of the full creation
of the story you just saw to give you an idea, if this is going to work, of how
the content creation works for the
AMP Stories and also spark your curiosity. This is going to be high speed
but I just want to tell you what we
wanted to do. Gutenberg is the new editor
introduced recently. It is a blog-based editor that
opened a world of possibility at a the
WordPress ecosystem. Our main goal is to create an
AMP Story experience fully integrated with
Gutenberg. The challenge that we face was
to provide storytelling creation
experience that actually bends Glutenberg
to the AMP Stories wile maintaining the editor as
familiar as any other content creation on the platform. The result, I am happy to say we
are succeeding. There is an AMP Stories WordPress editor that provides an
intuitive workflow. It gives you awesome templates
to get you started with story creation
quickly. It provides horizontal navigation which is contrary to the way Glutenberg works normally. The development of the editor is
taking place. It will be available in 1.2 version. We are in 1.1. We are releasing today, or
around today, but a version of the plugin so you can download it from the
GitHub reposreposirepository and start
playing with. If you do, reach out. We working to make this story
creating experience as much as inclusive as possible. There is
a lot of information you can get later from the recording. There are links about the plugin
and the new project and the new
SPEERNZ — experience that is super awesome. And a link to go download the
plugin. With that, thank you very much
and I will see you next year at
AMPConf. CRYSTAL LAMBERT:. Thank you so much, Alberto
Gaicometter and Danny. All loved all the hands that
went up during the talk. Coming up next, we will have our
very last talk of AMPConf 2019.
I can see smiles. I see tears. We are laughing while we are
crying. This next one is going to be
about AMP analytics and what that is going to be looking like
going forward. I would like to invite you to
stay tuned because there is a special surprise at the end.
Please give a round of applause for Jeffrey who has already joined
me on stage. JEFFREY JOSE: Wow, we made it. This is the very, very last talk
of AMPConf and I am super thrilled to be here. I am the product manager working
on the AMP validator. Over the past two days, we have seen the
AMP’s mission several times. I think it is worth looking at it
one more time. Provide a user-first format for
web content supporting the long term
success of every publisher, merchant and
advertiser. Long term success is at the core
of AMP mission and I am happy to walk
you through some things we are doing
an AMP analytic directly supporting that. When we set out to build AMP
analytics we knew we had to build something really fast,
something that was flexible so plugins could integrate on, and
moreover, we had to be accurate. There is no point in having bad
data. We often see developers on
non-AMP pages tack on tag after tack on to non-AMP pages. Most of these times do tags do
spot of the same thing. Nobody want to touch it because it just
works. Now, AMP analytics takes a
radically different approach here. In some sense, this is a natural
thing to do it. It a true measure once model. On
an AMP page when you implement a render you are doing a non
operation. Some of the biggest fames are
already integrated with AMP analytics. You can see that on the screen
right now. These are all analytic Windows
that work with AMP analytics. In fact, the growth you have seen
is tremendous. We started with just one in 2015
and we are over 70 today. That would not have been possible
without the vibrant community represented in this room, so
thank you. Thank you for pushing and taking
the open web forward. If you are an AMP analytic
vendor who has not integrated with AMP
analytics, I encourage you to look at
bit.ly/amp-analytics. A recent study from the University
of oxford found new sites have as many times as eight times as
many cookies. Browser Windows have started
responding to no surprise. Unfortunately, without reliable
metrics it is hard to set the direction for the business. That is why we launched AMP
linker last year. It is a framework that keeps
sessions in sync. If You Own A dot com and B dot
com you can keep those things. This works great with AMP Cache
patience and origin. If you have not taken a look at
it, I encourage you to took at it. If you are using Google
analytics, it requires one change. If you are use Google’s global
site tag it is already enabled for you.
Let’s dive deeper. If you are using our own
analytics you can set-up. Here I specify using a key
called variable one and I pass a bunch of values I care about. These help me keep my sessions
in think. Google Analytics and segment
support this. If you are an analytics partner not taking
advantage of this I encourage you to take a look at it. Bit.ly/amp-linker.
That is great. I love data if you have not
figured it out by now. There is one thing I don’t really like
and that is noise, the spam. Spam comes in a lot of different
flavors. Some of them are OK. Some are actually malicious. Protecting your site against
unwanted visitors is something that recapture excels in. With recap version 3 there is no
more friction when users are trying to accomplish something
on the site. I am happy to announce AMP has
full support for reCAPTCHA. Here is a quick
example of how that actually looks. You see a site key that
is very, very specific to you. And then you get a token and the servers will give you a score on
0-1. Based on your threshold, you can
take further action whether to stop someone from signing up, or
writing a review on your site or things like that. The best part
is normal users never see a challenge. Some of those identify what a
car is and what is not a car. Tasty, one of the very, very
popular names all of us know, have been
using it. On the second image you see, they have an email sign up and they have
been testing reCAPTCHA on it and the results
are tremendous. If you deal with unwanted
visitors on your site, this works today with AMP. Check out bit.ly/recapture. We are making it easier to get accurate metrics. Walking
through three steps here we have the setup phase where you
integrate triggers, setup availables, hook
up elements — variables — and then there is the debug phrase.
Nothing goes correct the first time especially for me. Finally, I play are dashboards
and look at charts and try to find out insights from the page. Let’s talk a little bit about
the setup phase. When I talked to partners who
are implementing AMP analytics they are often not starting from
scratch. They have an existing analytics configuration they
want to bring over. You have to figure out what technology works and non-AMP pages that can
be ported over. And understanding how AMP
analytics need to be setup is fairly standardized but it one
more thing to learn. I am happy to announce AMP
readiness. We recognize what technologies used on the page
and saw them into what is supported on AMP and what is not
supported. It is great because there is nothing not supported
on AMP. There is a little bit of — you
see an icon next to some of the names there.
That actually tells you — when I go ahead and click it, that gives
me copy/paste code and no more
hunting for documentation and references. All you need to
change is a couple variables and possibly your account number in
this case with GA. We support 20 different vendors today and we are adding more. This engine uses rapid under the
hood and we are very confident that
the technologies detected are
actually accurate. Go over to bit.ly/ampreadiness
to download this. Let’s talk about validating an AMP setup.
One thing developers need to validate is how identified is a
path between sites. You know, you got to turn on
Chrome Dev tools, hunt for a request, look
at the cookies, what the value is, it can take a little bit of
time. Today I am happy to announce amp
tag test. AMP tag test takes your URL and runs a battery of
tests against it. We do this twice. One for Chrome and one with
Safari so we can check if identifies are parsed correctly. These are identifies such as
GCL-ID which is critical if you have ads on your page. We rumicize — summarize them
into a table. If you want to debug further, we give you more
information. Show you what cookie values are
find between the source to the destination.
Let me quickly go back. Some of these things are
configurable. You can containing the click
through URL and we store results so you can
share the report with others in case you want to have someone
else take a look at it. It is available today at
AMPtagtest. appAMPtagtest.appspot.com. Let’s turn our attention to the
last piece of analytics. Recording. At Google, we have a lot of
experience building AMP pages but we find out publishers need
to go through the same process again and again. We asked
ourselves can we make this easy? Why should publishers have to
set-up everything from scratch? If only there was a dashboard
template we can share and then you could get started and going
very quickly. That is when we heard about a
product called Google Data Studio. It is a bash board template and
you bring your data and it shows you
the results. We are launching AMP insight and
you can bring your data, use the
expertise we have build over several years at Google, to
power some of your charts and dashboards you might have. We have done the heavy lifting
for you. As you see here, all the top
line metrics, number of sessions,
number of page views, if you are worried
unt how analytics should look like this is great opportunity.
This dashboard can save you time and shows you all the relevant
metrics you care for. I really like looking at the
charts up there. If you are doing AB testing and comparing
old performance with AMP’s performance we have that ready
to go. You can configure out URL. You
also break it down by devices. If you care about what the
performance of a certain device verses
others, cern country, that is all ready to go. — certain. We built this so you can get to
your insight much faster. Bit.ly/amp-insights. All right.
I have talked a lot about looking at data, getting insight but
conveniently avoided one point. How do we generate this data? It is sort of like a chicken and
egg problem. Do we launch something, measure, and say
let’s go back and do it all over again? Or do we do something that is
already very safe? I don’t think that is how we should be doing
things. AB testing is a principle way of
doing a testing and iterating.
You launch two or more versions of something, you test against
all of those, and you pick the winner. In fact, you see A/B testing on
most pages on the web today but unfortunately, A/B testing comes
with a cost in terms of performference
the user who are the folks you are trying to win and make a loyal customer in the
long term. AMP has long supported A/B
testing through the component called amp-experiment but it has
required developers to build a site with
A/B testing in mind. You told us companies have a
base page and someone comes along saying I
need to experiment. Developer teams build a team, and there is an separate team that comes
on top of it and start experimenting. We figure we could do a lot more
work here. Most of these times these teams
rely on a third party testing render to run experiments and
look at results. I am happy to announce we are
working with article maximize —
optimpizely. Your teams can maintain the same workflow and you know they are
AMP pages because there is no impacked —
impacted performance. I will really happy to show you
a demo right now working with
Optimizely. Action network is a media company that creates a lot
of original content. Here I am on their NHL page.
They create original content like articles such as these. You
can see this is a beautiful AMP page with a lot of great content
it. At the top, you see a banner. That banner if invites users to subscribe to a premium product
called the edge. The experiment teams have a hypothesis. Maybe we should test with a
different color. They rely on Optimizely to accomplish these
things. Let’s see how that would work. Right out of the bat you see the
AMP logo and that means A/B testing
is supported. I will name it AMPConf demo. I will call it this URL because
this is where I want to test. While the spins up, optimiziley
is giving me two variations. I will not touch the first one
and then version one. Let’s go to original here. If you have never seen the UI,
on the right side you see the same page. On the left side you
see a place where I can edit attributes. In the original, I
am not touch anything but it looks good.
Going to variation one. I want to change the color. It is as easy as selecting
there, scroll down and maybe change the background. I want to try a blue now. And I
will see. In fact, before I walked in, I
set-up the thing so we could save time. Let me show you that really
quick. I have four variations here and
this is what action network is running. Two variations of green and last
two are two variations of blue. This looks like this.
This is actually what we are trying to test again. Original,
the green. Variation one with the different text. Variation
two with blue. And blue. The text always comes from the
hypothesis maybe we need a method that talks to the user to have an
emotional connect. All right. This is the part that is going
to be a little nerve-wracking for me. As you know, A/B testing is
random. I am going to throw my dice and hopefully things will
work out. I am going to open incognito. I am going to
go to Google. I am going to click here. Let’s see what
bucket I fall into right now. There you go. It is showing me
the blue. If I look closely, this is
probably variation 3. That is what I am seeing. Let me try that one more time. This is again the blue. I will try this one more. It is the same thing.
Let me see if I can force variation one into this. This is
a way you as the developer can test. There is no reason to throw the
dice and hope it works. You know what, I am going to do
variation one. I go here and it will show variation two.
That forces me to go to that. This a great way of testing. Let me pick up variation two. If all goes well this shows me
blue with a different text than
before. I know to hospital two more
partners here. Article maximizer is working
with significant– signet.
Exceptional user experience is top of mind and they dabble with
experimentation and personalization. Partnerships such as these not
only help push the web forward but is also great for the
business. So, I showed you a bunch of things today. Here is a
quick recap. I slowed you amp-linker a great
way to keep sessions in sync between
your domains. Works great with AMP Cache. Bit.ly/amp-linker. Amp-recapture. Amp-readiness helps you quickly
get started with AMP analytics so you don’t have to worry about typos. Amp-tag-test is a way to
automate testing. We have done the heavy lifting for you. Amp-insights is great way to get
started with analytics leaning on the
years of experience of Google and relying on the templates so you can brink bring
data and not worry about the customs
that need to be set. And finally, I showed you about
amp-experiment. We are bring true A/B testing without changing the
speed. Talk to account managers. Talk to your account panger if
you are interested in the product. In closing, I want to
leave with one of my favorite quotes. If you can’t measure it, you
can’t manage it. I hope with the tools I showed you you and your
business can be set-up for long term success using AMP. Thank you again for joining in
Tokyo and thank you for your
attention. [Applause] YUSUKE USTUNOMIYA: Thank you,
everybody for staying until the very end. I think it was a very enjoyable
session. Today we are very happy to be
able to end the conference successfully
and thank you to everybody at the other end of the livestream. CRYSTAL LAMBERT: Thank you to
the contributors. I am lost for words. Thank you very much.
That was a big thank you to all the crew. Everyone who has been
tirelessly working on making this event a big success. All of
the speakers, of course, as well. Everyone who had to create
the panels, all the panelists, all of them
have come together to make this event a
great success so thank you. [Applause] as in Japanese you would say — maybe
a bit too early. I guess that’s really it.
Yeah. We don’t have much more to say
other than Thank you and one more thing, actually. Maybe you
can all stand up because we want to like do one big picture
with all of you in the room. We had the whole AMP team coming
in. Malte, coming up here. Yay. [Laughter] Nice. Thank you so much, everyone. [Applause]
YUSUKE USTUNOMIYA: Everybody thank you very much for the last
two days. It was fantastic. CRYSTAL LAMBERT: Couldn’t have
done it without you. [Applause]

One Comment

  • The AMP Channel

    Welcome to the official Day 2 livestream for AMP Conf 2019. Take part in the discussion and get your questions answered by the AMP Team!
    Submit your questions on https://www.sli.do/ using #AMPConf

Leave a Reply

Your email address will not be published. Required fields are marked *