We Keep Coding

How to include google custom search box in an React component

I would like to add a google custom search box in my site, which is created by using ReactJS. So the user can search content both within the site and on web.
The Google generated code is something like:
<script>
(function() {
var cx = '013626029679071:ze3ta4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
Is there a way to add this into the React component? It keeps saying SyntaxError. I tried to create a component for the above code and use it in the React Component, but nothings shows up. Is this the right way to add a searchbar on React site? Any hints?
Thanks!

I think I have a solution for you without using dangerouslySetInnerHTML. Put your code in the componentDidMount block and append to the element with jQuery like so:
componentDidMount(){
const embedcode = `<script>
(function() {
var cx = '013626029654558379071:ze3tw4csia4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>`
$('#gsearch').html(embedcode)
}
And your DOM element:
<div id='gsearch'>
</div>
Still debugging some styling stuff, but this works!
Best,
Patrick

This perfectly works for me. Add a form element in your react and modify the snippet as shown below. react return. Add a form element tag try it. it works for me.
<form method = "get" title = "Search Form" action="https://cse.google.com/cse/publicurl">
<div>
<input type="text" id="q" name="q" title="Search this site" alt="Search Text" maxlength="256" />
<input type="hidden" id="cx" name="cx" value="013626029654558379071:ze3tw4csia4" />
<input type="image" id="searchSubmit" name="submit" src="https://www.flaticon.com/free-icon/active-search-symbol_34148" alt="Go" title="Submit Search Query" />
</div>
</form>

Google _gaq.push not in anatlycis

I want custom tracking in analytics. I have a custom JavaScript site.
When you click on the button I fire this code:
_gaq.push(['_trackEvent',1, 'Stappen', 'Eerste stap - Type woning']);
But when I go to analytics, by the events, it's not showing. It's not showing in analytics. What have I done wrong, am I missing something?
The code in the header:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34399608-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Are you using ga.js version on the analytics script? This is a requirement to use event tracking.
I would also look at the even tracking code, the 1 would need to be '1', and look like the code below on your html button:
<button type="button" onClick="_gaq.push(['_trackEvent', '1', 'Stappen', 'Eerste stap - Type woning']);">Button</button>
Google event tracking help section is here: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

Google+ - How to open the interactive post dialog without a button click?

Is there a way to open the Google+ interactive post dialog without the need of clicking the button first?
I would like to have it displayed in a website directly.
Below is the related code from the G+ examples.
JavaScript:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
HTML:
<button
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>

Add an id to that button element (You can possibly use a different element entirely as long as you include all the supplied attributes -- can't be sure without testing) and style it to be hidden.
From there, just trigger a click on it on whatever event you want.
I.E.
HTML:
<button
id="thisdumbbutton"
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
CSS:
#thisdumbbutton{ display: none; }
JS:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
$('#something').hover(function(){
$('#thisdumbbutton').click();
});
})();
</script>

Google plusone button shows its popup broken

I used Google Plusone button in my web page and it appears with problem.
Please tell me what do I have to do ? The text is out of the box, and the left side of the box is not normal.
This is what I put in my code:
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

+1 button is unavailable or has stopped working

I have 3 google +1 buttons in the same wordpress page. But one of them fails when is clicked (in then float lateral widget) showing an exclamation mark.
When click again the following page is opened:
+1 button is unavailable or has stopped working. I am pretty sure that none of the described possible reasons occur.
The code for both is practically the same:
// float code (malfunction)
<div id="float_plusone">
<g:plusone size="tall" href="<?php echo urlencode(get_permalink()); ?>" count="true"></g:plusone>
</div>
<script type="text/javascript">
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
</script>
// above/below posts code (works)
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium" callback="googleplus_click"></g:plusone>
Any suggestion about is very welcome.

This is the URL the button is sending to the server to +1.
"id":"http://bestpushchairs.net/qc21/disclosure-policy/http%3A%2F%2Fbestpushchairs.net%2Fqc21%2Fdisclosure-policy%2F"
It looks like the button is taking the href value and assuming it is relative to the current path. Try not using urlencode.