Google CSE - jump to specific keyword - html

i'm currently working with the google cse and i wonder wether it's possible to jump to a specific searchword. for example if i goole on my page the word publications, and there is a section of publications on a page, is it possible to jump directly to this section by using the implemented google search?
at the moment every search i do, leads me to the beginning of the page where the keyword is placed.
greetings martin

This is possible, yes, but you would have to do some coding. If you think about how the Google search works, it just generates a list of links. It has no control over what happens once you reach the other page. So, anything that you wanted to happen on the destination page, you would have to code yourself. If you really want to do this, you could set it up something like this:
First, you will want to use a V1 CSE, since it offers the ability to set a callback function on search complete, which the new, simplified V2 does not. See V1 documentation here: https://developers.google.com/custom-search/docs/js/cselement-devguide
Here's the sample code from that page, modified to add a callback function:
<!--
copyright (c) 2012 Google inc.
You are free to copy and use this sample.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Custom Search Element API Example</title>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
customSearchControl = new google.search.CustomSearchControl().draw('cse');
}, true);
customSearchControl.setSearchCompleteCallback(this, searchCompleteFn);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="cse" style="width:100%;">Loading...</div>
</body>
</html>
Then you can create that callback function like so:
function searchCompleteFn(control, searcher) {
//your code
}
In your code, you would want to get all the a.gs-title elements within the cse div and modify their href attributes to add the user's query. That way your destination page can see what the user searched for and take appropriate action (scroll to the appropriate section, highlight the keywords, whatever you want). For example, if the existing href is http://www.yoursite.com/somepath/somepage.html, you could change it to http://www.yoursite.com/somepath/somepage.html#query=[user_query].
[user_query] is given by control.getInputQuery()
Finally, on your destination pages you would have javascript check for a query parameter in location.hash, and act appropriately.
I'm guessing this is way more work than you're interested in doing, but perhaps it will be helpful to someone.

Related

Google HTML Service - Evaluate Template and Keep Comments

I am using Google's HTML service to evaluate an HTML template and then sending the HTML it creates through Google's Mail App service as an e-mail. I have the following code to render the e-mail different for Microsoft Office clients:
<!--[if mso]><v:roundrect...v:roundrect><![end if]-->
<!--[if !mso]><td align='center'...</td><![endif]-->
My issue is that the HTML service evaluates the aforementioned code as commented out and the HTML that gets passed to the Mail App no longer has those lines of code in it.
I have been banging my head against the wall to figure out how to get Google's HTML service to not treat these as comments. Any thoughts?
Thanks!
There is a round-about way to retain HTML comments after template evaluation, but it comes with its owns issues.
You first enclose the comments in your template in CDATA tags. See example below:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<![CDATA[<!-- This is a comment -->]]>
<p>GET - Gmail Push Notification Endpoint</p>
</body>
</html>
When evaluated you'll end up with the following:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- This is a comment -->
<p>GET - Gmail Push Notification Endpoint</p>
</body>
</html>
Notice that certain characters (the < and >) are encoded as html entities, so you need to convert these back somehow. Unfortunately, Javascript does not have a native way to do that, so you either have to write your own script to replace them or use an existing library. I do the later and leverage the he library. You can create a script file in your Apps Script project and drop that code in as a dependency or put it in it's own project and deploy it as a dedicated Apps Script library.
Now you can bring it all together as follows:
// create template
let template = HtmlService
.createTemplateFromFile('template_with_comments_wrapped_in_CDATA_tags');
// add properties to template for evaluation
template.props = {...};
// get evaluated content as string
let evaluated = template
.evaluate()
.getContent();
// decode html entities
let decoded = he.decode(evaluated);
// return decoded as HtmlOutput
return HtmlService.createHtmlOutput().setContent(decoded);
And there you go.
Enclosing content in a template with CDATA tags has a number of applications, it even allows you to use non-HTML content as templates, so you can use this technique to create templates for all sorts of content (JSON, RFC822, etc.). Its a good trick to have in your arsenal of tools.
The reason why that is happening is because those are HTML comments indeed.
Check this reference to learn about how to comment in HTML.
To solve your problem, simply comment out your lines of code (i.e remove <!-- and -->):
[if mso]><v:roundrect...v:roundrect><![end if]
[if !mso]><td align='center'...</td><![end if]

How do I automatically translate my website into the user's language?

I have a website in English, and recently some users reported that they do not know English, so I thought, maybe the site is not accessible to everyone, because some do not know English.
So my question is: is there any way for the website to automatically translate into the user's language?
I've been searching, it seems that Google has a translation API, is this what I need?
EDIT
I want to detect the user's browser language and translate the page into the user's browser language. We can obtain the language of the browser using navigator.language || navigator.userLanguage in JavaScript. Is there any way to integrate this with the Google API and then automatically translate without requiring user interaction?
I think it may be possible through control structures and methods, or by passing a variable as a parameter on the Googgle Translate website, am I right?
Please, I need help, I don't want the user to choose the language, I want to translate automatically, I want to recognize the language of the user's browser and automatically translate
Note: I use <meta charset="UTF-8">, does this affect anything?
This answer might answer the question and the solution is from w3schools. What it basically does is that a dropdown will be created with different types of languages. Here is the code, tell me if it works.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
I hope this is what you are looking for.
Remember how you asked me how I can detect the user's language? Well I finally came up with a code for that. Code is below.
let lang = window.navigator.languages ? window.navigator.languages[0] : null;
lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
let shortLang = lang;
if (shortLang.indexOf('-') !== -1)
shortLang = shortLang.split('-')[0];
if (shortLang.indexOf('_') !== -1)
shortLang = shortLang.split('_')[0];
console.log(lang, shortLang);
I hope this is what you are looking for!

Can script tag appear before title and meta tags?

I am studying how to embed Google Analytics tracking code into my web page. Based on the document at https://developers.google.com/analytics/devguides/collection/analyticsjs/ , it said "The code should be added near the top of the tag and before any other script or CSS tags", in such a case, can the code be put before title and meta tags , like this:
<HEAD>
<!-- 2019-03-01: Google Analytics Tracking Code(async) for xxxx, based on Google online help -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-xxxx', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['shareit.com', 'mycommerce.com'] );
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<TITLE>xxxxxx</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META name="DESCRIPTION" content="xxxxxx">
This looks a bit strange. So I just wonder if it is OK to put script tag before title & meta tags?
Thanks
The only restriction you face is that <meta charset must be must be serialized completely within the first 1024 bytes of the document.
Putting script elements before it could violate that constraint.
There will be no ill effects, but no improvements either. GA code should go before CSS and script tags because downloading them might block the browser and delay downloading the Google Script and (more importantly) delay running the ga command queue. Meta tags do not really have influence on the processing, so it doesn't matter if they come before the code, but browsers are not really picky as the where in the header title and meta show up.
As far as my knowledge you can use the script tags before head tags, if you want to prioritize your execution of the script then use it just below the starting of head tags.

Can't run or embed google Web App

I'm just learning google script and want to start by making a simple hello world. I have done google's tutorial and when I click "test this code" on the publish web app popup, the code runs and I get my basic hello world result. Great. But When I paste the provided URL into the browser or embed that same URL into google sites, I just get a blank page.
How do I run an web app? Am I missing something?
code.gs:
function doGet() {
var html= HtmlService
.createTemplateFromFile('Index');
html.name = 'David';
return html.evaluate();
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Hi <?=name?>!</b>
</body>
</html>
Coming from a basic PHP background, I'm used to just going to the URL of the .php file and bang, away it goes... I'm so confused.
https://stackoverflow.com/a/40843413/6288442
Google had just recently enabled this feature. It has been under a
'feature request' status for quite a long time. Link here
You can now explicitly define X-Frame-Options.
To allow embedding under another domain, the option should be
HtmlService.XFrameOptionsMode.ALLOWALL
Google documentation on the subject:
https://developers.google.com/apps-script/reference/html/html-output#setXFrameOptionsMode(XFrameOptionsMode)
Example:
function doGet() {
return HtmlService.createTemplateFromFile('form.html')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); }
Hope this helps!
I think this should work
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Hi <?!=name?></b>
</body>
</html>
https://developers.google.com/apps-script/guides/html/templates#force-printing_scriptlets
Name of file should also be exactly same
I think Index and index won't work

How do I redirect to the requesting URI using only HTML?

I want to create an html file that I can use as a link that will (eventually) redirect to the requesting URI.
I can hard code the redirect target to be the caller, but I'd rather not.
Update:
As for what I will use to do it, the following comment provides a starting point:
from https://stackoverflow.com/users/665261/billy-moon
on Redirect from an HTML page:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=http://example.com">
<script type="text/javascript">
window.location.href = "http://example.com"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow the <a href='http://example.com'>link to example</a>
</body>
</html>
This will not work unless I'm willing to replace the 'http://www.example.com' with my calling page similarly in a hard-coded fashion.
Unless, there is a way to redirect to the calling URI, programmatically.
This will be a client side redirect. I don't have knowledge of the web server that my company uses and it cannot be assumed since this will be placed in production if it works. My html will be static.
Aside:
The goal is to provide a link that once requested calls a third-party API, then redirects to the calling URI. (I do not have connectivity to the third-party API yet, so figuring that out is not part of the question.) Doing something in the interim, after the html has loaded, but prior to the redirect (such as calling the API/making a command-line terminal call against a scheduler) is desired, however.
But to be clear, my question is 'How do I redirect to the calling URI within an html file?'
use the meta tag refresh
see: http://webmaster.iu.edu/tools-and-guides/maintenance/redirect-meta-refresh.phtml
example:
<META http-equiv="refresh" content="0;URL=http://www.example.com">