amp-html

How to include custom JS in AMP Page through SW?

微笑、不失礼 提交于 2019-12-06 11:54:30
问题 We have gone through from all possible blogs of AMP but couldn't find any way to include custom JS in AMP. This blog(https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker) indicates that we can add Custom JS in AMP with the help of Service worker but haven't describe how to do it. Please let us know How to do it. Edit:- After adding JS at the run time, it again show the same old error, Please have a look to the image 回答1: Note in the mentioned blog

AMP IFrame is not working in AMP LightBox

南楼画角 提交于 2019-12-06 08:14:06
问题 Example:- <amp-lightbox id="my-lightbox" layout="nodisplay"> <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0"> <amp-iframe width="350" height="300" layout="fixed" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://ampbyexample.com/"></amp-iframe> </div> </amp-lightbox> <button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0">Open Iframe in Lightbox</button> I also tried to manipulate the position of iFrame

How to set AMP image Align Center

馋奶兔 提交于 2019-12-06 07:13:56
问题 How to set in amp page like follow? <p align="center"><img src="img/LOCK1.png" width="40"> <img src="img/lock2.png" width="40"> <img src="img/LOCK3.png" width="40"></p> Thank You! 回答1: For amp you need to use amp-img tag AMP HTML files don't support the normal HTML img tag. With amp-img AMP provides a powerful replacement. <p> <amp-img src="img/LOCK1.png" layout="fixed" width="40" height="40" alt="Lock1"></amp-img> <amp-img src="img/lock2.png" layout="fixed" width="40" height="40" alt="Lock2"

Pass dynamic event label in Google AMP analytics event tracking

笑着哭i 提交于 2019-12-06 04:45:07
I want to track an event with google analytics when a link is clicked on my AMP html page. Also I want to pass the link(href) as eventLabel while tracking this event. Is there a way to set the link URL as data-* attribute which then can be passed to google analytics event tracking script. Or is there any other way to do this. This is pretty standard thing but Google Analytics for AMP page doesn't cover it. I think what you are asking for was recently made available here . basically, you can use code like <span id="test1" class="box" data-vars-event-label="22"> Click here </span> and then use

AMP image is not appearing

半城伤御伤魂 提交于 2019-12-06 04:22:39
问题 I can't get this amp-img to show up. It works as an image, and when I click the src-link it loads on a separate page correctly. Changing it to amp-img makes it disappear. I set background-color: red on the amp-img and the box appears correctly, but it's an empty red box. HTML: <li> <a href="/"> <amp-img src="https://d12v9rtnomnebu.cloudfront.net/oursite/logo_white.png" alt="site logo" width="264" height="96"/> </a> </li> CSS (probably a lot of extraneous stuff that needs to be trimmed but don

AMP browser support?

混江龙づ霸主 提交于 2019-12-05 09:20:19
问题 Looking at the AMP spec, given the reliance on CSS variables to custom style elements, this means current browser support is narrow. See: Can I use reference I'm guessing there is a 'graceful fallback' to non custom styled, since browsers not understanding the CSS variables will just ignore that CSS. Is there a browser compatibility/support matrix for AMP? 回答1: Browser Support In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We

How to check Amp is enabled for a website with Php

半腔热情 提交于 2019-12-04 22:55:27
Is there a general way to check if AMP is enabled for an URL? I currently use Curl to get HTML. What should I do after? $html; if(AMP is Enabled) echo "You are using AMP in Mobile Version"; else echo "You are not using AMP in Mobile Version"; Yes you can do like this Non AMP page contain <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> Assuming that you have the content in $html; PHP CODE $dom = new DOMDocument(); @$dom->loadHTML($html); $nodes = $dom->getElementsByTagName('link'); foreach ($nodes as $node) { if ($node->getAttribute('rel') === 'amphtml') { echo(

AMP with amp-state and amp-position-observe

人盡茶涼 提交于 2019-12-04 15:26:28
I have a problem in AMP combining amp-state and amp-position-observe. <amp-state id="myState"> <script type="application/json"> { "visible": "n" } </script> </amp-state> <amp-state id="variableChange"> <script type="application/json"> { "visible": "y" } </script> </amp-state> <amp-position-observer on="enter:variableChange" layout="nodisplay"> </amp-position-observer> This code return a strange error: url.js:348 Trust for 'activate' (1) insufficient (min: 100).​​​ amp-position-observer currently cannot be combined with amp-state. Only amp-animation and some video components can be combined

How to include custom JS in AMP Page through SW?

孤者浪人 提交于 2019-12-04 15:01:38
We have gone through from all possible blogs of AMP but couldn't find any way to include custom JS in AMP. This blog( https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker ) indicates that we can add Custom JS in AMP with the help of Service worker but haven't describe how to do it. Please let us know How to do it. Edit:- After adding JS at the run time, it again show the same old error, Please have a look to the image Note in the mentioned blog post that you can extend your AMP pages as soon as they’re served from the origin Having a service worker

How to set AMP image Align Center

梦想的初衷 提交于 2019-12-04 14:13:58
How to set in amp page like follow? <p align="center"><img src="img/LOCK1.png" width="40"> <img src="img/lock2.png" width="40"> <img src="img/LOCK3.png" width="40"></p> Thank You! For amp you need to use amp-img tag AMP HTML files don't support the normal HTML img tag. With amp-img AMP provides a powerful replacement. <p> <amp-img src="img/LOCK1.png" layout="fixed" width="40" height="40" alt="Lock1"></amp-img> <amp-img src="img/lock2.png" layout="fixed" width="40" height="40" alt="Lock2"></amp-img> <amp-img src="img/LOCK3.png" layout="fixed" width="40" height="40" alt="Lock3"></amp-img> </p>