{"id":1595,"date":"2017-10-02T14:34:34","date_gmt":"2017-10-02T09:34:34","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=1595"},"modified":"2017-10-02T14:38:11","modified_gmt":"2017-10-02T09:38:11","slug":"how-to-invoke-amp-in-wordpress","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/how-to-invoke-amp-in-wordpress\/","title":{"rendered":"How to Invoke AMP (Accelerated Mobile Pages) in WordPress?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Accelerated Mobile Pages \u2014 the AMP project was launched by Google in 2016, as an attempt to deal with the slow page load time on the mobile web. AMP makes your web pages load faster, which enhances user experience and brings more traffic to your site. In this article, I am going to explain how you can invoke AMP in WordPress, customize it, and enable Google Analytics for it.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1603 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress.png\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress.png 1920w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-300x169.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-768x432.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-1024x576.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-1680x945.png 1680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-1240x698.png 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-860x484.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-680x383.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-500x281.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-400x225.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-200x113.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress-50x28.png 50w\" sizes=\"(max-width: 1920px) 100vw, 1920px\"><\/p>\n<\/div>\n<h2>What is AMP?<\/h2>\n<p><span style=\"font-weight: 400;\">AMP is an open source project by Google which aims to load pages <\/span><i><span style=\"font-weight: 400;\">instantly <\/span><\/i><span style=\"font-weight: 400;\">on the mobile devices. Mobile devices are on the boom and people read lots and lots of web content through it. However, despite all the speedy internet connections the web page loads too slow. So, this is where AMP steps in and loads a web page quickly by stripping down the design of your website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The three major components of AMP pages are:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">AMP HTML<\/span><\/li>\n<li><span style=\"font-weight: 400;\">AMP JS<\/span><\/li>\n<li><span style=\"font-weight: 400;\">AMP Cache<\/span><\/li>\n<\/ul>\n<h3>AMP HTML:<\/h3>\n<p><a href=\"https:\/\/github.com\/ampproject\/amphtml\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">AMP HTML<\/span><\/a><span style=\"font-weight: 400;\"> is a form of HTML with some restrictions, custom tags, and properties. The most simplest AMP page looks like this:<\/span><\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_default\"><code>&lt;!doctype html&gt;\n&lt;html \u26a1&gt;\n &lt;head&gt;\n   &lt;meta charset=\"utf-8\"&gt;\n   &lt;link rel=\"canonical\" href=\"hello-world.html\"&gt;\n   &lt;meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"&gt;\n   &lt;style amp-boilerplate&gt;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}}&lt;\/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;\/style&gt;&lt;\/noscript&gt;\n   &lt;script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"&gt;&lt;\/script&gt;\n &lt;\/head&gt;\n &lt;body&gt;Hello World!&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">The first two children of the head tag are fixed, and they must be in the same order as shown in the code snippet. However, the other children are also compulsory for a valid AMP HTML to function. It does not support form elements, which means no comments. Also, it does not allow linkage of any external stylesheet except fonts. You can read more about building AMP HTML page <\/span><a href=\"https:\/\/www.ampproject.org\/docs\/tutorials\/create\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">AMP JS<\/span><\/h3>\n<p><a href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/master\/src\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">AMP JS library<\/span><\/a><span style=\"font-weight: 400;\"> is what lies at the core of AMP HTML, and handles tasks like loading, custom tags management, and fast rendering. External resources loading is managed asynchronously, and no third party javascript library is allowed.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">AMP Cache<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Google AMP Cache is utilized as Content Delivery Network (CDN) to cache your AMP content. It comes with a built-in validation system which performs AML HTML check and guarantees the working of the page.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">AMP Pages &amp; SEO<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You might have noticed a high voltage \u00a0(<\/span><span style=\"font-weight: 400;\">\u26a1)<\/span><span style=\"font-weight: 400;\"> sign showing up on some of your Google searches on mobile.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1599 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result.png\" alt=\"\" width=\"1200\" height=\"1906\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result.png 1200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-189x300.png 189w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-768x1220.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-645x1024.png 645w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-860x1366.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-680x1080.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-500x794.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-400x635.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-200x318.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Sign-In-Google-Search-Result-50x79.png 50w\" sizes=\"(max-width: 1200px) 100vw, 1200px\"><\/p>\n<\/div>\n<p><span style=\"font-weight: 400;\">It shows that a \u00a0website is AMP enabled. Such links are opened way too quickly. Another interesting feature about AMP pages is, if they made it to the google news carousel in the search result, you can open one of them and then literally slide across the screen to open another.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1596 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-In-News-Carousel.gif\" alt=\"\" width=\"350\" height=\"603\"><\/p>\n<\/div>\n<p><span style=\"font-weight: 400;\">Also, AMP may not affect your site rankings directly but indirectly YES!. Because speed has always been an appreciated feature so, a fast web page brings better user experience, lesser bounce rate, and ultimately better site ranking.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How Can I Invoke AMP In My WordPress Website?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can use this plugin called <\/span><a href=\"https:\/\/wordpress.org\/plugins\/amp\/\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">AMP by Automattic<\/span><\/a><span style=\"font-weight: 400;\"> to dynamically generate an AMP-compatible version of your website.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1598 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic.png\" alt=\"\" width=\"1600\" height=\"545\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic.png 1600w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-300x102.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-768x262.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-1024x349.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-1240x422.png 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-860x293.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-680x232.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-500x170.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-400x136.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-200x68.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Plugin-by-Automattic-50x17.png 50w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"><\/p>\n<\/div>\n<h3>Step#1: Install The Plugin<\/h3>\n<p><span style=\"font-weight: 400;\">Download the plugin from plugins repository, install, and enable it. When you enable this plugin, it generates the AMP versions of your posts automatically. If you have <\/span><a href=\"https:\/\/codex.wordpress.org\/Using_Permalinks#mod_rewrite:_.22Pretty_Permalinks.22\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">pretty permalinks<\/span><\/a><span style=\"font-weight: 400;\"> enabled, you can access the AMP versions of your pages by appending <code>\/amp\/<\/code> at the end of your post URL. In case if you don\u2019t have pretty permalinks, you can access the AMP version by adding <code>?amp=1<\/code> at the end of your post URL. The reason why I am saying \u2018at the end of your <\/span><i><span style=\"font-weight: 400;\">post <\/span><\/i><span style=\"font-weight: 400;\">URL\u2019 is that this plugin does not support WordPress pages right now. <\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Step#2: Validate AMP Pages<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Once you have installed and enabled the AMP plugin, you can validate your pages in Chrome by concatenating <code>#development=1<\/code> at the end of your post URL. Open the console from Chrome Developer Tools and refresh the page. You will see a successful confirmation message just like the one I attached below.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1600 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome.png\" alt=\"\" width=\"1236\" height=\"329\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome.png 1236w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-300x80.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-768x204.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-1024x273.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-860x229.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-680x181.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-500x133.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-400x106.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-200x53.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Validation-in-Chrome-50x13.png 50w\" sizes=\"(max-width: 1236px) 100vw, 1236px\"><\/p>\n<\/div>\n<p><span style=\"font-weight: 400;\">Next step is to validate Schema Markup. You can use Google\u2019s <\/span><a href=\"https:\/\/search.google.com\/structured-data\/testing-tool\/u\/0\/\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">Structured Data Testing Tool<\/span><\/a><span style=\"font-weight: 400;\"> to verify the valid Schema Markup. Just visit the link and paste the link of AMP version of your post.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can track your AMP pages in Google Search Console by navigating to <code>Search Appearance &gt; Mobile Accelerated Pages<\/code> section. Don\u2019t worry if no result appears right now. Google takes some time to identify and crawl the AMP pages.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1602 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages.png\" alt=\"\" width=\"1282\" height=\"471\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages.png 1282w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-300x110.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-768x282.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-1024x376.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-1240x456.png 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-860x316.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-680x250.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-500x184.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-400x147.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-200x73.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/Google-Search-Console-And-AMP-Pages-50x18.png 50w\" sizes=\"(max-width: 1282px) 100vw, 1282px\"><\/p>\n<\/div>\n<h2><span style=\"font-weight: 400;\">Customizing The AMP Pages<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As I mentioned at the start of the post, AMP strips down your fancy design to a basic design that load instantly. AMP by Automattic allows you to customize basic components like header text color, header background color, and it also allows you to choose from dark and light color scheme. Move to <code>Appearance &gt; AMP<\/code> to customize these components.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1597 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-Customization.png\" alt=\"\" width=\"489\" height=\"598\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-Customization.png 489w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-Customization-245x300.png 245w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-Customization-400x489.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-Customization-200x245.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Pages-Customization-50x61.png 50w\" sizes=\"(max-width: 489px) 100vw, 489px\"><\/p>\n<\/div>\n<h2><span style=\"font-weight: 400;\">Integration of Google Analytics in AMP Pages<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There\u2019s a plugin by Yoast called <\/span><a href=\"https:\/\/wordpress.org\/plugins\/glue-for-yoast-seo-amp\/\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">Glue for Yoast SEO &amp; AMP<\/span><\/a><span style=\"font-weight: 400;\">; it does not only allow you to integrate analytics but also allow more customization than the AMP plugin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Make sure you have installed SEO by Yoast, and download the plugin from the plugin repository, install it, and activate it. Navigate to SEO &gt; AMP. <\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Post Types<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">By default, it opens the \u2018Post types\u2019 tab of the plugin.<\/span><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1601 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page.png\" alt=\"\" width=\"1600\" height=\"837\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page.png 1600w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-300x157.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-768x402.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-1024x536.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-1240x649.png 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-860x450.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-680x356.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-500x262.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-400x209.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-200x105.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-Yoast-SEO-Main-Page-50x26.png 50w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"><\/p>\n<\/div>\n<p><span style=\"font-weight: 400;\">Here you can select the post types for which you want to enable the post types that will support AMP Pages. Currently, it supports posts and media attachments.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In the design tab, you can change the appearance of header, text, links, and blockquotes. It also allows you to add extra CSS &amp; &lt;head&gt; code, but make sure that the code is valid AMP HTML code. You can also select default image for your posts, in case if AMP fails to fetch an image from your post, or maybe the post doesn\u2019t have one. <\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Analytics<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In this section, you can add your analytics code to track the traffic. You can\u2019t use the code provided in your Analytics Dashboard because AMP HTML does not support it. You can use the following code to track the pageviews on your website:<\/span><\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_default\"><code>&lt;amp-analytics type=\"googleanalytics\"&gt;\n&lt;script type=\"application\/json\"&gt;\n{\n  \"vars\": {\n    \"account\": \"UA-XXXXX-Y\"\n  },\n  \"triggers\": {\n    \"trackPageview\": {\n      \"on\": \"visible\",\n      \"request\": \"pageview\"\n    }\n  }\n}\n&lt;\/script&gt;\n&lt;\/amp-analytics&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Replace UA-XXXXX-Y by your analytics tracking code. You can extend this code to track more details of visitors by using <\/span><a href=\"https:\/\/developers.google.com\/analytics\/devguides\/collection\/amp-analytics\/\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"font-weight: 400;\">this guide<\/span><\/a><span style=\"font-weight: 400;\"> by Google. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s all for today! I think adding the AMP Pages into your website is the right action to take. It will definitely streamline a great chunk of mobile users to your site. If you any thoughts or questions, share in comments.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accelerated Mobile Pages \u2014 the AMP project was launched by Google in 2016, as an attempt to deal with the slow page load time on the mobile web. AMP makes your web pages load faster, which enhances user experience and brings more traffic to your site. In this article, I am going to explain how [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[1],"tags":[38,7,39],"coauthors":[],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/09\/AMP-for-WordPress.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1595"}],"collection":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=1595"}],"version-history":[{"count":0,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/1603"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=1595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=1595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=1595"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}