Category: google Amp

Aug 10

Google AMP – Dynamic CSS Classes

Google AMP – Dynamic CSS Classes ”; Previous Next The amp-dynamic-css-classes adds dynamic classes to the body tag. In this chapter, let us learn the details of this tag. To work with amp-dynamic-css-classes, we need to add following script − <script asynccustom-element=”amp-dynamic-css-classes” src = “https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js”> </script> There are two important classes that are taken care by amp-dynamic-css-classes − amp-referrer-* amp-viewer Let us discuss each of them in detail. amp-referrer-* These classes are set depending on how the users are coming. It means if the user is coming from Google, the referrer class related to Google will be set. The same applies true for Twitter and Pinterest. The classes are available based on the type of the referrer. For example, for Google the following classes will be added if the user clicks amp pages from Google search engine. amp-referrer-www-google-com amp-referrer-google-com amp-referrer-com Similarly there are classes available for Twitter, Pinterest, Linkedin etc. amp-viewer Amp viewer is basically going to change the amp url to get the details from Google cache. If you search something in Google search, the carousel that is displayed will a have all the amp pages. When you click them, they are redirected to the url with Google url as the prefix. The amp-viewer class will be set when the page is being viewed by the user in amp- viewer and using dynamic classes. When you click the amp page the url which you get in the address bar is as follows − https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Dynamic Css Classes</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width,minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body { -webkit-animation:none;-moz-animation:none; -ms-animation:none;animation:none } </style> </noscript> <script async custom-element = “amp-bind” src = “https://cdn.ampproject.org/v0/amp-bind-0.1.js”> </script> <script async custom-element = “amp-dynamic-css-classes” src = “https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js”> </script> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css”> <style amp-custom> body:not(.amp-referrer-pinterest-com) .if-pinterest, body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample, body:not(.amp-referrer-google-com) .if-google, body:not(.amp-referrer-twitter-com) .if-twitter, body:not(.amp-referrer-linkedin-com) .if-linkedin, body:not(.amp-referrer-localhost) .if-localhost { display: none; } body:not(.amp-viewer) .if-viewer, body.amp-viewer .if-not-viewer { display: none; } p { padding: 1rem; font-size:25px; } </style> </head> <body> <h3>Google AMP – Dynamic Css Classes</h3> <div> <p class = “if-pinterest”>You were referred here or embedded by Pinterest!</p> <p class = “if-twitter”>You were referred here or embedded by Twitter!</p> <p class = “if-google”>You were referred here or embedded by Google!</p> <p class = “if-ampbyexample”>You came here directly! Cool :)</p> < class = “if-localhost”>You came here directly! Cool :)&lt/p> &lt/div> &ltdiv> <p class = “if-not-viewer”>Hey! You are not coming from amp viewer&lt/p> <p class = “if-viewer”>Hey! From amp viewer.</p> <div> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Google AMP – Caching

Google AMP – Caching ”; Previous Next Google amp provides caching facility which is a proxy based content delivery network to serve pure amp pages. Amp cache is available by default to all the valid amp pages. It helps in rendering the pages faster in comparison to non amp pages. Currently, there are 2 amp cache providers Google AMP Cache and Cloudflare AMP Cache. As said earlier, amp caching is made available to all valid amp pages. Incase if the user does not want to use amp cache feature, you need to make your amp page invalid. Amp cache is not applied for invalid amp pages. The moment Google search crawls and finds amp () for the html content, it considers for caching. In this section, we will discuss various components of Google amp cache URL. Subdomain Google AMP adds a subdomain to the url requested. There are some rules followed for amp cache subdomain url. They are shown here − Rules for Subdomain cache URL Converting the AMP document domain from IDN (Punycode) to UTF-8. The dash (-) in the url is replaced with two dashes (–) The dot (.) in the url is replaced with dash(-). Converting back to IDN (Punycode). For example pub.mypage will be replaced with pub-mypage.cdn.ampproject.com. Here cdn.ampproject.com is the subdomain added by google amp. Now the cached url is Pub-mypage.cdn.ampproject.com. Content Type The content type available are c for AMP HTML Document, i for image and r for resource like for example font. You will get 404 error if the content type does not match with the ones specified. Optional ‘s’ If s is present, the content will be fetched from the origin https:// ; else, it will fetch from http:// An example for the request made to cached image from https and http is shown here − Example https://pub-mypage-com.cdn.ampproject.org/i/s/examples/images/testimage.png So, in the above example the url is having i which means image and s for https − Example http://pub-mypage-com.cdn.ampproject.org/i/examples/images/testimage.png Thus, in the above example the url is having i which means image and there is no s, so the url will be fetched from http. For a font cached file, the url will be as follows − Example https://pub-mypage-com.cdn.ampproject.org/r/s/examples/themes/lemon/fonts/Genericons.ttf Content type r is used for resources like fonts and s for secure url. For html document the url is as follows − Example https://pub-mypage-com.cdn.ampproject.org/c/s/trends/main.html It has c in the url is for HTML document, followed by s which is for https:// Google AMP cache uses http headers like Max-age to decide whether the content cache is stale or fresh and automatically sends fresh requests and updates the contents so that next user gets the contents updated. Print Page Previous Next Advertisements ”;

Aug 10

Html Page To Amp Page

Google AMP – Html Page to Amp Page ”; Previous Next In this chapter, we will understand how to convert a normal html page to an amp page. We will also validate the page for amp and check the output at the last. To start with, let us take the normal html page as shown below − test.html <!DOCTYPE html> <html> <head> <meta charset = “utf-8”> <title>Tutorials</title> <link href = “style.css” rel = “stylesheet” /> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0”> <script src = “js/jquery.js”></script> </head> <body> <header role = “banner”> <h2>Tutorials</h2> </header> <h2>Some Important Tutorials List</h2> <article> <section> <img src = “images/tut1.png” width=”90%” height = “90%”/> </section> <section> <img src = “images/tut2.png” width=”90%” height = “90%”/> </section> <section> <img src = “images/tut3.png” width=”90%” height = “90%”/> </section> <section> <img src = “images/tut4.png” width=”90%” height = “90%”/> </section> </article> <footer> <p>For More tutorials Visit <a href = “https://tutorialspoint.com/”>Tutorials Point</a></p> </footer> </body> </html> Note that we are using style.css in it and the details of the css file are as given here − h1 {color: blue;text-align: center;} h2 {text-align: center;} img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } article { text-align: center; } header{ width: 100%; height: 50px; margin: 5px auto; border: 1px solid #000000; text-align: center; background-color: #ccc; } footer { width: 100%; height: 35px; margin: 5px auto; border: 1px solid #000000; text-align: center; background-color: yellow; } Note that we have also used jquery.js file in the .html listed above. Now, host test.html locally and see the output seen in link given here − http://localhost:8080/googleamp/test.html Now, let us go step-by-step to change above test.html file to test_amp.html file. First, we have to save test.html as test_amp.html and follow the steps given below. Step 1 − Add the amp library in the head section as shown below − <script async src = “https://cdn.ampproject.org/v0.js”> </script> For example, once added to test_amp.html, it will be as follows − <head> <meta charset = “utf-8”> <title>Tutorials</title> <script async src = “https://cdn.ampproject.org/v0.js”> </script> <link href = “style.css” rel = “stylesheet” /> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0”> <script src = “js/jquery.js”></script> </head> Now run the page test_amp.html in the browser and open the browser console. It will display the console message as shown below − To know if your html file is a valid amp add #development=1 to your html page url at the end as shown below − http://localhost:8080/googleamp/test_amp.html#development=1 Hit the above url in the browser and in the Google Chrome console. It will list you errors which amp thinks are invalid from amp specification point of view. The errors we have got for test_amp.html are shown here − Let us now fix them one by one till we get amp successful message. Step 2 − We can see the following error in the console − We can fix that by adding ⚡ or amp for the html tag. We will add amp to html tag as shown below − <html amp> Step 3 − Please make sure you have the meta tag with charset and name=”viewport” in the head tag as shown below − <head> <meta charset = “utf-8”> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0”> </head> Step 4 − The next error that we have is shown here − It says href in link rel=stylesheet ie the following link is throwing error. This is because amp does not allow external stylesheet using link with href to be put inside pages. <link href = “style.css” rel = “stylesheet” /> We can add the all the css in style.css as follows − <style amp-custom> /*All styles from style.css please add here */ </style> So the css data present in style.css has to be added in style with amp-custom attribute. <style amp-custom> h1 {color: blue;text-align: center;} h2 {text-align: center;} img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } article { text-align: center; } header{ width: 100%; height: 50px; margin: 5px auto; border: 1px solid #000000; text-align: center; background-color: #ccc; } footer { width: 100%; height: 35px; margin: 5px auto; border: 1px solid #000000; text-align: center; background-color: yellow; } </style> Add the style tag to your amp page. Let us now test the same with the above style tag in the browser. The changes we have done so far to test_amp.html are shown here − <!DOCTYPE html> <html amp> <head> <meta charset = “utf-8”> <title>Tutorials</title> <script async src = “https://cdn.ampproject.org/v0.js”> </script> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0”> <script src = “js/jquery.js”></script> <style amp-custom> h1 {color: blue;text-align: center;} h2 {text-align: center;} img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } article { text-align: center; } header{ width: 100%; height: 50px; margin: 5px auto; border: 1px solid #000000; text-align: center; background-color: #ccc; } footer { width: 100%; height: 35px; margin: 5px auto; border: 1px solid #000000; text-align: center; background-color: yellow; } </style> </head> <body> <header role = “banner”> <h2>Tutorials</h2> </header> <h2>Some Important Tutorials List</h2> <article> <section> <img src = “images/tut1.png” width = “90%” height = “90%”/> </section> <section> <img src = “images/tut2.png” width = “90%” height = “90%”/> </section> <section> <img src = “images/tut3.png” width = “90%” height = “90%”/> </section> <section> <img src = “images/tut4.png” width=”90%” height = “90%”/> </section> </article> <footer> <p>For More tutorials Visit <a href = “https://tutorialspoint.com/”>Tutorials Point</a></p> </footer> </body> </html> Let us see the output and errors in console for above page. Observe the following screenshot − The error shown in the console is as follows − Now, you can see that for some of the errors for amp, style is removed. Let us fix the remaining errors now. Step 5 − The next error we see in the list is as follows − We have added the script tag calling jquery file. Note that amp pages do not allow any custom javascript in the page. We will have to remove it and make sure to use amp-component which is

Aug 10

Google AMP – Actions And Events

Google AMP – Actions and Events ”; Previous Next To use actions or events on a amp-component, we can use the on attribute. In this chapter, let us discuss them in detail. Events The syntax to work with events is as follows − on = “eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]” The details passed to on attribute are as follows − eventName − This takes the name of the event which is available for the amp-component. For example, for forms we can use submit-success, submit-error eventNames. elementId − This takes the id of the element on which the event needs to be called. It can be the id of the form for which we want to know about the success or error. methodName − This takes the name of the method to be called on the event occurrence. arg=value − This takes the arguments with key=value form passed to the method. It is also possible to pass multiple events to the on attribute and it is done as follows − on = “submit-success:lightbox;submit-error:lightbox1” If there are multiple events, they are passed to the on attribute and separated using semicolon(;). Actions Actions are basically used with on attribute and the syntax is as follows − on = “tab:elementid.hide;” We can pass multiple actions as follows − on = “tab:elementid.open;tab:elementid.hide;” Elementid is the id of the element on which the action is to be performed. Amp has some globally defined event and actions which can be used on any amp-component and they are tap event and the actions are hide, show and togglevisibility. If you want to hide/show or use togglevisibility on any html or amp component, you can use on=”tap:elementid.[hide/show/togglevisibility]” Let us see some working examples for events and actions. On Input Element Let us understand this better with the help of a working example − Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Amp Bind</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width,minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body { -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = “amp-bind” src = ” https://cdn.ampproject.org/v0/amp-bind-0.1.js”> </script> <script async custom-element = “amp-lightbox” src = ” https://cdn.ampproject.org/v0/amp-lightbox-0.1.js”> </script> <style amp-custom> button{ background-color: #ACAD5C; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: left;} .lightbox { background: rgba(211,211,211,0.8); width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; } #txtname{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } div { font-size:25px; } </style> </head> <body> <h3>Google AMP – Amp Bind</h3> <button on = “tap:AMP.setState({displaylightbox: true})”> Click Here </button> <br/> <br/> <h3>AMP – Input Element</h3> <input id = “txtname” placeholder = “Type here” on = “input-throttled:AMP.setState({name: event.value})”> <div [text] = “name”></div> </body> </html> Output Note that in the above example, we are using event on the input field as follows − <input id = “txtname” placeholder = “Type here” on = “input-throttled:AMP.setState({name: event.value})”> The event used is input-throlled. We can also use change as follows − <input id = “txtname” placeholder = “Type here” on = “change:AMP.setState({name: event.value})”> The output will be displayed once the user comes out of the input box. We can use change event on input type as radio, checkbox etc and also on select element. <input id = “txtname” placeholder = “Type here” on = “input-debounced:AMP.setState({name: event.value})”> Event input-debounced is same as changeevent but the output is seen after 300ms after the user types. Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Amp Bind</title> <link rel = “canonical” href = ” http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width,minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = “amp-bind” src = “https://cdn.ampproject.org/v0/amp-bind-0.1.js”> </script> <script async custom-element = “amp-lightbox” src = “https://cdn.ampproject.org/v0/amp-lightbox-0.1.js”> </script> <style amp-custom> button{ background-color: #ACAD5C; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: left; } .lightbox { background: rgba(211,211,211,0.8); width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; } #txtname{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } div { font-size:25px; } </style> </head> <body> <h3>Google AMP – Amp Bind</h3> <button on = “tap:AMP.setState({displaylightbox: true})”> Click Here </button> <br/> <br/> <h3>AMP – Input Element</h3> <input id = “txtname” placeholder = “Type here” on = “input-debounced:AMP.setState({name: event.value})”> <div [text] = “name”></div> </body> </html> Output On Amp Lightbox In this section, we are going to test the following events on lightbox − lightboxOpen lightboxClose Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Amp Lightbox</title> <link rel = “canonical” href = ” http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width,minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = “amp-bind” src = “https://cdn.ampproject.org/v0/amp-bind-0.1.js”> </script> <script async custom-element = “amp-lightbox” src = “https://cdn.ampproject.org/v0/amp-lightbox-0.1.js”> </script> <style amp-custom> amp-img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } button { background-color: #ACAD5C; color:

Aug 10

Google AMP – Validation

Google AMP – Validation ”; Previous Next Google AMP is a way to get the web pages to load faster on the devices. To work with amp we can make use of HTML5, CSS and amp-components. Google Amp provides many ways to validate an amp page. Some of the important ones that we are going to discuss in this chapter are − Using #development=1 Using Amp Validator Using command line Let us discuss each of them in detail. Using #development =1 Once you know your page is ready to be validated, just add #development=1 to the end of the page-url and test the same in chrome developer tools. You can add #development=1 to your html page url at the end as shown in the example given below − http://localhost:8080/googleamp/test_amp.html#development=1 Hit the above url in the browser and in the Google Chrome console. It will list the errors which amp thinks are invalid from amp specification point of view. Here are the errors we have got for test_amp.html. You can fix the errors displayed and once all the errors are fixed it will display as follows − Using Amp Validator Amp has a validator tool wherein we can enter the HTML content and it displays the status as PASS or ERROR and also shows the error on the page. The link is − https://validator.ampproject.org/ The display for amp validator tool is as shown below − The example of error in the page content is shown below − Using Command Line You can install the npm package using the following command − npm install -g amphtml-validator We have created a folder amptest/ and saved amp_test.html file in that folder. Let us validate amp_test.html using the following command in the command line. amphtml-validator youramppage.html Let us remove some tags from the page to see if it displays the error. The displayed error can be fixed till we get the status as PASS. Print Page Previous Next Advertisements ”;

Aug 10

Google AMP – Layout

Google AMP – Layout ”; Previous Next AMP-Layout is one of the important feature available in Google-amp. Amp Layout makes sure the amp components are rendered properly when the page is loaded without causing any flicker or scrolling issue. Google AMP make sure that layout rendering is done on the page before any other remote resources like http request for images, data calls are done. The list of layout attributes is given below. width and height layout sizes heights media placeholder fallback noloading We will consider the layout attribute in detail in this chapter. The rest attributes are discussed in details in the chapter − Google AMP – Attributes of this tutorial. Layout Attribute We can use layout attribute on an amp-component which will decide how the component will render inside the page. A list of layouts supported by amp is given below − Not Present Container fill fixed fixed-height flex-item intrinsic nodisplay Responsive For each of this layout, we will see a working example which will show how the layout attribute renders the amp-component differently. We will make use of amp-img component in our examples. Not Present Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8″> <script async src=”https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Image</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <style amp-custom> amp-img { border: 1px solid black; border-radius: 4px; padding: 5px; } </style> </head> <body> <h1>Google AMP – Image Example</h1> <amp-img alt = “Beautiful Flower”src = “images/flower.jpg” width = “246” height = “205”> </amp-img> </body> </html> Output Container Example Layout=”container” is mostly given to the parent element and the child element takes the sizes defined. <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Image</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both }@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <style amp-custom> amp-img { border: 1px solid black; border-radius: 4px; padding: 5px; } h1{ font-family: “Segoe UI”,Arial,sans-serif; font-weight: 400;margin: 10px 0; } </style> </head> <body> <h1>Google AMP – Layout = container Image Example</h1> <amp-accordion layout = “container”> <amp-img alt = “Beautiful Flower” src = “images/flower.jpg” width = “246” height = “205”> </amp-img> </amp-accordion> </body> </html> Output Fill Example Layout= ”fill” takes the width and height of the parent element. <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title> Google AMP – Image <title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <style amp-custom> amp-img { border: 1px solid black; border-radius: 4px; padding: 5px; } h1{font-family: “Segoe UI”,Arial,sans-serif; font-weight: 400;margin: 10px 0;} </style> </head> <body> <h1>Google AMP – Layout = fill Image Example</h1> <div style = “position:relative;width:100px;height:100px;”> <amp-img alt = “Beautiful Flower” src = “images/flower.jpg” width = “246” height = “205” layout = “fill”> </amp-img> </div> </body> </html> Output Fixed and fixed-height Example Before understanding the usage of fixed and fixed-height, please note the following two points − layout=”fixed” needs to have width and height and the amp-component will be shown in that. layout=”fixed-height” needs to have height specified for the component.It will make sure the height is not changed .The width must not be specified when using fixed-height or it can be auto. <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Image</title> <link rel = “canonical” href = “http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <style amp-custom> amp-img { border: 1px solid black; border-radius: 4px; padding: 5px; } div{ display: inline-block; width: 200px; height:200px; margin: 5px; } h1{font-family: “Segoe UI”,Arial,sans-serif; font-weight: 400;margin: 10px 0;} </style> </head> <body> <h1>Google AMP – Layout = fixed and Layout = fixed-height Image Example </h1> <div> <amp-img alt = “Beautiful Flower” src = “images/flower.jpg” width = “246” height = “205” layout = “fixed”> </amp-img> </div> <div> <amp-img alt = “Beautiful Flower” src = “images/flower.jpg” height = “205” layout = “fixed-height”> </amp-img> </div> </body> </html> Output Flex-item and intrinsic <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8″> <script async src =”https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Image</title> <link rel = “canonical” href =” http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible <style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <style amp-custom> amp-img { border: 1px solid black; border-radius:

Aug 10

Google AMP – Custom Javascript

Google AMP – Custom Javascript ”; Previous Next In the previous chapters, we have studied many amp-components. We have also seen that for each component to work we need add a javascript file. For example, for amp-iframe the script added is as follows − <script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”> </script> We have async added to the script tag. This is the standard for amp as they load all the javascript files asynchronously. There is a custom-element attribute added which has the name of the component it is used for. To use any amp-component if it is not a part of the core amp javascript file, the script has to be added as shown above. We are mostly used to writing, a lot of javascript code inside pages and also include javascript file using script tag. How can we do that in amp? So for that AMP does not allow any script code to be written or load script tag externally. Amp has its own component to take care of the job which is suppose to be done by the additional script which is added on the page. This is basically done for performance reasons, to load the page content faster and not have javascript delay the rendering or do any changes to the DOM. This is the specification given by AMP as per their official site for script tags − Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components. A working example where we can use application/ld+json inside our amp pages is shown here. Note that we are using the script tag with type=”application/ld+json” for amp-analytics component to fire tracker. Similarly, we can use script tag with type=”application/ld+json” on other amp-components wherever required. Example <!doctype html> <html amp> <head> <meta charset = “utf-8”> <title>amp-analytics</title> <script async src = “https://cdn.ampproject.org/v0.js”> </script> <script async custom-element = “amp-analytics” src = “https://cdn.ampproject.org/v0/amp-analytics-0.1.js”> </script> <link rel = “canonical” href = “ampanalytics.html”> <meta name = “viewport” content = “width=device-width, minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> </head> <body> <h1>Google Amp – Analytics</h1> <amp-analytics> <script type = “application/json”> { “requests”: { “event”: “http://localhost:8080/googleamp/tracking.php? user=test&account=localhost&event=${eventId}” }, “triggers”: { “trackPageview”: { “on”: “visible”, “request”: “event”, “vars”: { “eventId”: “pageview” } } } } </script> </amp-analytics> </body> </html> When the page is hit in the browser, the tracker will be fired for pageview. It can be seen in the Google network tab as shown below. Print Page Previous Next Advertisements ”;

Aug 10

Google AMP – Next Page

Google AMP – Next Page ”; Previous Next Amp next page is an amp component which can dynamically load more pages when the user reaches at the end of the document. This chapter deals with this concept in detail. To work with amp-next-page component we need to add following script − <script async custom-element = “amp-next-page” src = “https://cdn.ampproject.org/v0/amp-next-page-0.1.js”> </script> Also amp-next-page is not fully launched, so to get the test page working add the following meta tag − <meta name = “amp-experiments-opt-in” content = “amp-next-page”> To load the pages dynamically, we need to give the page-urls to the script tag of type=”application/json” as shown below − <amp-next-page> <script type = “application/json”> { “pages”: [ { “title”: “Page 2”, “image”: “images/christmas1.jpg”, “ampUrl”: “ampnextpage1.html” }, { “title”: “Page 3”, “image”: “images/christmas1.jpg”, “ampUrl”: “ampnextpage2.html” } ] } </script> </amp-next-page> In the above tag, we are trying to load 2 pages ampnextpage1.html and ampnextpage2.html. Now, let us see the final output. All the pages that need to be loaded has to be added to the pages array with title, image and ampUrl. Example <!doctype html> <html amp> <head> <meta charset = “utf-8”> <title>Google Amp – Next Page</title> <link rel = “canonical” href = “ampnextpage.html”> <meta name = “amp-experiments-opt-in” content = “amp-next-page”> <meta name = “viewport” content =”width = device-width, minimum-scale = 1,initial-scale = 1″> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async src=”https://cdn.ampproject.org/v0.js”> </script> <script async custom-element = “amp-next-page” src = “https://cdn.ampproject.org/v0/amp-next-page-0.1.js”> </script> </head> <body> <h1>Google Amp – Next Page</h1> <h1>Page 1</h1> <p>Start of page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>This content is loaded from page 1</p> <p>End of page 1</p> <amp-next-page> <script type = “application/json”> { “pages”: [ { “title”: “Page 2”, “image”: “images/christmas1.jpg”, “ampUrl”: “ampnextpage1.html” }, { “title”: “Page 3”, “image”: “images/christmas1.jpg”, “ampUrl”: “ampnextpage2.html” } ] } </script> </amp-next-page> </body> </html> Output You can notice that as you scroll, the page the next page to be loaded is shown, also the page-url in the address bar is changed. Print Page Previous Next Advertisements ”;

Aug 10

Google AMP – Useful Resources

Google AMP – Useful Resources ”; Previous Next The following resources contain additional information on Google AMP. Please use them to get more in-depth knowledge on this. Useful Links on Google AMP Google AMP − Official site of Google AMP Google AMP @ Wikipedia − Google AMP, its history and various other terms has been explained in simple language. To enlist your site on this page, please drop an email to [email protected] Print Page Previous Next Advertisements ”;

Aug 10

Google AMP – User Notification

Google AMP – User Notification ”; Previous Next Google amp-user-notification is used to show dismissible dialog box messages to the user. We can use it to notify user about cookies on the page. To work with amp-user-notification we need add following script on the page − <script async custom-element = “amp-user-notification” src = “https://cdn.ampproject.org/v0/amp-user-notification-0.1.js”> </script> Amp-user-notification tag format − <amp-user-notification id = “my-notification” layout = “nodisplay”> <div>Example of amp-user-notification. <button on = “tap:my-notification.dismiss”>I accept </button> </div> </amp-user-notification> Let us understand the amp-user-notification using a working example − Example <!doctype html> <html amp lang = “en”> <head> <meta charset = “utf-8”> <script async src = “https://cdn.ampproject.org/v0.js”></script> <title>Google AMP – Amp Selector</title> <link rel = “canonical” href = ” http://example.ampproject.org/article-metadata.html”> <meta name = “viewport” content = “width = device-width,minimum-scale = 1,initial-scale = 1”> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none animation:none } </style> </noscript> <script async custom-element = “amp-user-notification” src = “https://cdn.ampproject.org/v0/amp-user-notification-0.1.js”> </script> <style amp-custom> div { font-size: 15px; background-color : #ccc; padding: 10px 10px; border-radius: 2px; } button{ background-color: #ACAD5C; color: white; cursor: pointer; float: right; } </style> </head> <body> <h3>Google AMP – Amp User Notification</h3> <amp-user-notification id = “my-notification” layout = “nodisplay”> <div>Example of amp-user-notification. <button on = “tap:my-notification.dismiss”>I accept </button> </div> </amp-user-notification> </body> </html> Output The output of the working example code given above is as shown below − Once the user clicks the button, the notification is dismissed. Once dismissed, the notification will not be displayed even if you reload the page. The data of the user notification is stored in the browser localStorage.If the localstorage is cleared and the page is refreshed, you will be able to see the notification again. You can try the same using localStorage.clear() in the browser console. Using dismiss action the notification can be dismissed, by using the action on a button as follows <button on = “tap:my-notification.dismiss”> I accept </button> When user taps on the button the notification will be dismissed. Print Page Previous Next Advertisements ”;