how to add custom google search to AMP site - wordpress

hi i am trying to use the code I have my Google Custom Search Engine (GCSE) code:
<script async src="https://cse.google.com/cse.js?cx=009000000000000:u0000000"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
However, my Accelerated Mobile Pages (AMP) site does not allow me to add JavaScript to it, and I don't see any AMP components that allow GCSE to be integrated into an AMP site.
How can I get GCSE on my site without breaking AMP compliance?
Thank you

I added a search feature to my open source website (https://csaba.page/) with amp-form following these steps:
Create a GCSE (Google Custom Search Engine) at the CSE (Custom Search Engine) Console https://cse.google.com/ as described by https://developers.google.com/custom-search/docs/tutorial/creatingcse if you haven't already done so.
Remember your Search engine ID, it looks something like "013535696182405026577:kmxne16xdtx". You can see it on the Basics tab in the CS Console, or if you are looking at the JavaScript code it's the cx variable.
Add <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> to your head section where the other AMP includes are.
In the body add an amp-form where you want to position the search input and style the form as you need:
<div>
<form method="GET" class="search-form" action="https://www.google.com/cse" target="_top">
<div class="search-form-inner">
<input name="cx" type="hidden" value="013535696182405026577:kmxne16xdtx" />
<input name="ie" type="hidden" value="UTF-8" />
<input type="search" placeholder="Search..." name="q" required>
<input type="submit" value="Go" class="search-button">
</div>
</form>
</div>
Here are some blog posts as well:
https://csaba.page/blog/amp-google-custom-search-engine.html
https://gfw-blog.netlify.app/2018/05/11/cse-amp.html
And an initial commit: https://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/commit/96345716d620b916d1c61cb5b51941378ffc5dc6

Related

Search Wordpress Site and External (Non-Wordpress) Site Search Form with Radio Buttons

I'm trying to duplicate the search box on this site : https:clearviewlibrary.org over on a Wordpress install here: https://news.clearviewlibrary.org
I was able to get the search box to execute a search on the external site with this code:
<div>
<form method="get" action="javascript:void(0)"
onsubmit="window.open('http://www.wsld.info/#section=search&term<%=Config%>#section=search&term='+this.term.value+'', '_blank');return true;">
<label>
<input type="text" class="searchform" name="term" placeholder="Search Our Catalog" /></label>
</form>
</div>
but I'm stumped on how to go about adding the additional search functionality and radio buttons.
I've tried taking the code from the clearviewlibrary.org site, but that didn't work. I also saw this, but would rather not have the two buttons : HTML form action search, one text box, 2 buttons, 2 possible results
Thanks,
Brad

how to add custom HTML form in drupal

I have HTML5 form with text box and a submit button,like below
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
and how can I use above html code in drupal??
Well, easiest way for creating forms would be by using webform module. It's easy to use, intuitive, but again powerful:
https://www.drupal.org/project/webform
https://www.drupal.org/docs/8/modules/webform/webform-features
So, my suggestion is to use it and add some CSS if you need to style your form.
Second way, would be by using Drupal's form api. For this you'll have to check on documentation, read some tutorial or similar.Requires some programming skills.
https://www.drupal.org/docs/8/api/form-api/introduction-to-form-api
Third way would be creating totally custom page end-point, where you can literally copy-paste your code as it is:
https://www.drupal.org/docs/8/creating-custom-modules/create-a-custom-page

Analytic funnelling, tracking two URLs with different parameters, both being triggered as the same URL.

I want to be able to track goals but I need to know whether they came from a page with a social media parameter or a digital marketing parameter in the URL.
I currently have subscription form which returns a URL with a specific parameter depending on which page we're on. We're using wordpress.
<?php if(is_page( 'internet-marketing-software')): ?>
<div class="free-trial" style="display:none;">
<div class="sign-up-button" style="/* display:none; */">
<form name="signup" id="signup" action="http://dmtrk.net/signup.ashx" method="post" onsubmit="return validate_signup(this)">
<input type="hidden" name="addressbookid" value="1922561">
<input type="hidden" name="userid" value="52978">
<input type="hidden" name="ReturnURL" value="http://test-site.com/?signup=false&step2=true&digital-marketing=true&form=form-banner">
<input id="input" type="text" name="Email" placeholder="name#email.com">
<input type="hidden" id="double" name="double" value="double">
<input id="submit" class="banner" type="Submit" name="Submit" value="sign up">
</form>
</div>
<div class='trial-desc'>
<p>Interested? <span>Start 30 day FREE trial now!</span>
</p>
</div>
</div>
<?php endif; ?>
I load a similar piece of code in the header this time with the condition
if(is_page( 'social-media'))
and which returns the url
http://test-site.com/?signup=false&step2=true&social-media=true&form=form-banner.
I so depending on the page each user gets taken to either the social-media or digital-marketing page.
When this URL us triggered a double opt-in email is sent with a link taking them to the true goal page http://test-site.com/?signup=true.
In Google Analytics I have set up two goals with the funnelling capability turned on.
I currently have the destination setup as:
RegEx /?signup=true
Funnelling On
Step &digital-marketing=true
And then for social:
RegEx /?signup=true
Funnelling On
Step &social-media=true
Looking at my reports each time a goal is triggered, no matter which URL was used they both register as a goal.
I'm not sure what I'm doing wrong, is there something I'm overlooking with Analytics and URL parameters?
To follow up on the comments (I cannot comment) - You should mark the previous page (coming from digital marketing or social) as "required step" to make sure that the goal will register in one of the paths, and not both. See the button on the right.

Make Google Searchbox code compatible with ASP.NET WebForms

I was provided the following code to integrate into my ASP.NET WebForms page:
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-8127518365728966:9snx3s9v6fx" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="25" /><br />
<input type="submit" name="sa" value="Search" class="formoutput"/>
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
However, I'm not sure how to do this because of the extra form element that this poses. Has somebody translated this to work with ASP.NET WebForms previously, and if so can you help me out?
Thanks!
Take a look here: http://am22tech.com/s/22/Blogs/post/2010/05/26/How-can-I-add-Google-search-box-to-my-website-on-master-page-with-aspnet.aspx
It's a bit of a hack but the idea is to do the following:
Place the search box in a separate HTML page
Modify the Target and Action properties of the form
Add an iFrame to your main page with the source of the above HTML page
The article is pretty detailed and, if you don't mind using an iFrame, then it should answer your question.
Update
Scott Mitchell has posted a very detailed article that does not use iFrames. It looks like more work to implement but may be the better choice.
URL: http://dotnetslackers.com/articles/aspnet/Implementing-Search-in-ASP-NET-with-Google-Custom-Search.aspx

Google search code in ASP.NET Master Page

I'm trying to put the following Google generated search box code into a Master page on a site:
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxx:u3qsil-l6ut" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
The problem, I believe, is something to do with the form tags. I've tried putting this code inside a user control and embedding that in the master page but no luck yet...
Do you by any chance have a "form runat=server" wrapping around where your user control is being placed?
That would cause a problem.
ASP.NET likes to enclose the entire page with a Form tag, and you can't nest form tags...So move it outside of the <form runat="Server"> tag and you'll be fine.

Resources