I am trying to design a mobile first web app using Google Apps Script.
I would try to replicate the most basic Bootstrap page (http://getbootstrap.com/examples/navbar) in a Google Apps Script.
This is the way the bootstrap page should render on my mobile device:
but instead my page loads like this (ie. http://goo.gl/yZpgUg):
This is my code.gs:
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
My index.html is copied and pasted from http://getbootstrap.com/examples/navbar with CDNs replaced as appropriate.
I figured HtmlService.SandboxMode.NATIVE was important to get this to work but doesn't seem to work.
Dear world - any help would be greatly appreciated.
Cheers.
UPDATE 1 - (THANKS FOR YOUR RESPONSES!)
in IFRAME:
IFRAME console errors (2):
NATIVE console errors (lots):
Bottom line - clearly GAS is not liking it and doesn't seem super straight forward - I've ended up turning the GAS into an API which returns JSONP from the spreadsheet I need - much more straight forward. Thank you for all your help!
I know you decided to go another route, but I got this to work in the same scenario. You can simply add the meta tag on the GAS code using the following code:
var output = HtmlService.createHtmlOutput('Hello, world!');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
So when you serve up your html in doGet add the meta tag. Check out this link for more information: https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)
Apparently Google can't load Bootstrap from their server, try copying everything to GAS and include in the page as explained in best practices. Also switch back to IFRAME when testing.
Related
I'm working on an Angular (1.6.8) app in which we've implemented the Angulartics library in combination with Google Analytics and Google Tag Manager extensions. This is all working quite well when I follow the instructions that are provided.
But we seem to have a bit of a special situation, the application that we're building is going to be used by multiple people, and based on who is visiting we fetch user settings from our api (using url parameters to know who is visiting at that time).
These users can manage their settings in a different Angular app, it's in this second app that they provide us with they Tag Manager tag, and their Analytics code.
Now comes the hard part (for me at least), Google Tag Manager requires a script tag in the head of our html, but at that time the user settings have not been loaded from our api yet, so we can't provide Google's script with the correct Tag Manager tag (this format: GTM-XXXXX).
Does anyone know of a way to load these scripts correctly when we have dynamically loaded tracking codes? Or is this just not possible?
Thanks for anyone who can provide some insights.
Alright it's been a while and I've figured out a solution that does the job (a while ago), I'll display how I got there in case someone else stumbles upon my question.
It ended up being quite simple, I have the following in my html
<!-- Google Tag Manager -->
<script ng-bind-html="googleTagManagerScript"></script>
<!-- End Google Tag Manager -->
And then in my app.js I fetch the settings through an ajax call and when I have the results I do the following
$rootScope.pixels.tagmanager = value; // store the retrieved Tag Manager code in a variable
$rootScope.googleTagManagerScript = $sce.trustAsHtml("(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','"+$rootScope.pixels.tagmanager.code+"');");
$rootScope.googleTagManagerNoScript = $sce.trustAsHtml("<iframe src='https://www.googletagmanager.com/ns.html?id="+$rootScope.pixels.tagmanager.code+"' height='0' width='0' style='display:none;visibility:hidden'></iframe>");
So basically I put the entire Google script in a variable as soon as everything is available, and ng-bind-html takes care of the rest.
I hope that makes sense.
I have a personal project which consumes my free time and effort for about a year without significant profit. I have problems with it appearance in Google and would really appreciate to get help here.
This project (http://yuppi.com.ua - similar to craiglist in US) is WEB-based AngularJS 1.2 application that uses PHP rest API hosted on GoDaddy. And in order to make this application popular it have to be very visible in internet and very searchable in Google and users have to be able to share pages via social networks or skype.
According to Google specification, google crawlers doesn't run javascript to get content of a web page before index, so I've added _escaped_fragment_ page that displays content of web page without javascript. For example:
Page: http://yuppi.com.ua/#!/items/sub/18/_
Dirty : yuppi.com.ua/?_escaped_fragment_=/items/sub/18/_
This dirty page will be redirected here where google will see content.
http://yuppi.com.ua/server/crawler_proxy/routee.php?path=/items/sub/18/
So basically I have two versions on HTML file for that page. One version is the one that available to users, which has styles, a lot more HTML tags etc. And the second is the version for Google crawler - very light-weight without any styles. And I am expecting to see clean link to my site in Google, not dirty.
So, If to search all links to a web site in Google you will see that one of the links displays it's "dirty" state.
Another problem is sharing links in Skype.
When I send a link to someone, I am expecting that this link will be transformed to thumbnail image but it is not happens. Instead I see ungly link to my web site.
Please help me to understand how to make happy everyone: users, google crawler, GoDaddy and me.
I was encountering the same problems last year with a big project and we ended to use : https://prerender.io/.
It's a prerendering system that work with a phantomjs browser to detect bot request and render a full html template. It does also instanciate a cache service to not render again a template that haven't change.
Hope it help's.
I am making a website using AngularJS, I am curious to know that is there any disadvantage of hash in url with respect to seo ?
e.g. http://www.website.com/#about-us
I'll appreciate any contribution.
Thanks
If we go back to the basics, HASH # means a DIV ID in your HTML, and to talk in more details Google ignores anything after the HASH.
Example, this page www.mydomain.com is similar to www.mydomain.com/#about-us
This is an advanced technique some marketers are using it to track their campaign without using parameters like UTMs to avoid content duplication.
To make sure your page is loading without any errors, try to disable the JS from your browsers using "Web Developer Tool" and then load your page, i think you will get a white page without content and this is the way Google and most of the search engines see your pages.
Also there is another way to test it by going to Search Console "Webmaster tool" and use fetch as Google, here you will see exactly how Google view your page.
I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app
Some apps got tutorial when the first time open.It seems cool.
I'm trying to create an opening tutorial that consists of four panes for my AngularJs app.
I build my app with css3 and html5 ,use cordova to generate apk.
How to create tutorial for my app when the first time open it?
Is there any solution?
Thanks a lot!
Sorry maybe I didn't make myself clear.The app is almost done,and splash screen has done.
But I need few pages or images on the first time run.
Use database. For example if you use localStorage, inside the deviceready function
check=localStorage.getItem('first_time');
if(check.length<0)
{
startTutorial();
localStorage.setItem('first_time','NO it is old');
}
After the first run value will be changed and tutorial will be shown once.
You can use other databases like indexedDB or webSQL.