I am working on vivvo template. Which is completed, now I have to integrate Accelerated Mobile Pages (AMP) in it. To reference amp js file use this
<script async src="https://cdn.ampproject.org/v0.js"></script>
but this file did't included in pages. And all reference files css and js after this line didn't loaded. I followed this link to use amp
Create Your First AMP Page
What am i missing. Please help. Thanks
Well for a start you can't use any other CSS files (inline CSS only) nor Javascript.
What do you mean "this file did't included in pages"? That piece of javascript is mandatory on an AMP page (it's what makes it an AMP page).
Also have you used the #development=1 option in Google Chrome? Append that to your URL and then reload the page with Developer tools open and look at the console to see errors.
I've blogged my own experiences creating AMP pages here: https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/ as there were a few funnies I didn't realise until I started implementing them.
Related
I want to embed an interactive diagram in my Readymag page via iframe, but the diagram won't show up. I performed a test in JSFiddle: https://jsfiddle.net/TheFelipeGarcia/2p3aguck/, and it works there.
First, I exported my infographic as HTML + JavaScript from Adobe Animate. Then, I used Readymag's Widget Code to add the code to my page. A side note: originally the HTML had a link to the JS file
<script src="infographic.js?1578942235513"></script>
but I pasted the JS inline (it's very long so I won't repaste here).
Does anyone have experience with Readymag or a similar issue of embedding iframes, that might have ideas what I could be doing wrong?
I am using gatsby js to build my static amp page and you can see the final html output in the search console. You can see that the generated html passes amp validation. That test passes because I copy and pasted the generated html.
However the website fails because on page load the official amp script <script async src="https://cdn.ampproject.org/v0.js"></script> adds ineligible tags. If I remove the script, the html stays the same. There are other scripts but I am 99% sure it's ^ one because I tried removing them one by one.
The script adds things like amp-version i-amphtml-sizer in the css and changes other things on the page. I am not sure why it would add these tags because v0.js is recommended by amp.
You can see the failing page here.
https://search.google.com/test/amp?id=aClwacaTtbw5q7-Dm3glPg&skip_amp_follow=true
If someone can point me to the original amp v0.js I will be truly grateful. The CDN version is uglified+transpiled and it's really hard to debug my issue.
This was caused by amp cache. I had to follow this guide to invalidate the cache for all my amp pages.
https://developers.google.com/amp/cache/update-cache.
I am developing a chrome extension for fetching ads from a web page. What I am trying to do is that:
My extension should look for HTML5 banner ads from the opened web page.
It should detach the ad code and save it to my computer as an html file.
The html file created should not depend on an external JS or CSS file. It means when it gets detached, the CSS or JS code attached to it should be detached and saved as a part of the html page (not a hyper link).
I was wondering if there are any existing libraries or open source plugins that do that. If not, can anyone point me in the right direction where to begin?
This won't directly pick out banner ads for you, you'll need to do that yourself, but all the functionality you're hoping for is available using content scripts.
I'm trying to follow the AMP guidelines suggested by Google (ampproject.org)
but as soon as I add their js script, the jQuery scroll stops working
Does anybody knows why and how to fix it?
The script tag is prohibited in AMP HTML unless:
The type is application/ld+json
It is the mandatory script tag to load the AMP runtime
It is a tag to load extended components
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
A list of available extensions, such as amp-carousel, can be found here.
You can also use custom elements and web components according to this page.
"AMP components may have JavaScript under the hood, but it is
coordinated with other AMP components, so its composition into the
page doesn’t cause performance degradation."
The only way to include JQuery scroll is to pull it in via an AMP-IFRAME tag. But that will only give you access to it within the context of the amp-iframe so most likely that will not help you. What are you trying to accomplish with the JQuery scroll? AMP pages are meant to be simple and for displaying information very quickly. Best examples for the use of AMP pages are news sites. If you open CHROME debugger and click on the mobile view icon and then do a search for say "Trump", you'll see the carousel of AMP pages at the top. You'll notice that they are all simple news stories. Nothing to fancy.
Do you have an example of what you are trying to do that we can look at?
I will start with admitting that although I have been researching, reading, and trouble-shooting my issue I think I am missing something fundamental with my site. I apologize for my ignorance in advance but this is the only way to learn--by admitting you don't know what to do.
I'm running a VB.NET site which has a master page and content pages. I am still very much in development of the entire site trying to add features.
What I'd like to do:
I would like to add google analytics and jquery magnific popup. I've followed all the instructions from google and from magnific pop-up and I'm still having issues.
What I've done to try and make this work so far:
My head on masterpage:
<script src="Scripts/googleanalytics.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-magnific-popup.js" type="text/javascript"></script>
My footer on masterpage:
<script type="text/javascript">
$('.test-popup-link').magnificPopup({type: 'image'});
</script>
Added class to image:
<a class="test-popup-link" href="img/bigdog.jpg"><img class="centerimg" src="img/smalldog.jpg" /></a>
My issues:
Google script fails to find script. It's definitely there, it was
copy/pasted directly from google's site into a file I am calling.
jquery and magnific pop-up only load on my root pages.
"/products/product1.aspx" pages for example refuse to load scripts.
Although they load on root pages, the script does not appear to work
for the image pop up. I've followed magnific-popup's instructions word for word for "initializing in html"
Instructions for magnific-popup: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Lastly, before I tried adding the image pop-up google analytics appeared to be working as I was getting reporting on the web analytics page.
Any help would be appreciated.
Solution found via talking it out on IRC.
I restarted my local server and it worked on my root directory. Race conditions or caching causing the problem?
I needed to add "/" before "Scripts" in my head which fixed non-root script loading.
Thanks to robert on freenode for talking me through it. :D