Load a generic script with a custom UID - javascript

I want to give users a snippet to put on their own sites which loads a generic javascript file with a unique ID for that user. This is so the content which loads up is dependant on which user id is associated with it.
My best guess so far is something like this:
<script type="text/javascript">
var UID = '';
(function() {
var url = www.test.com/embed.js';
})();
</script>
<noscript>Please enable JavaScript to view this content</noscript>
content powered by <span class="logo">Test</span>
I havent had a lot of luck with this code. Can anyone explain how I should be approaching this please?

Here is the way that google does it. Let me know if you need help applying it:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Ref. https://developers.google.com/analytics/devguides/collection/gajs/

You need to append <script> tag to the DOM.
You should put your entire script inside a single scope (function)
(function(window, uid) {
var document = window.document;
// create your <script> element
var e = document.createElement("script");
e.src = "//my.website.com/my-script.js?user-id=" + window.encodeURIComponent(uid);
// insert it before the very first <script> element already in DOM
var s = document.body.getElementsByTagName("script")[0];
s.parentNode.insertBefore(e, s);
})(window, "some-user-id");

Related

Google Custom Search Engine - control results on click

Im facing an issue with my project, I want to control the search results, which means when a user clicks on any result, there will be an action.
I am using "Google Custom Search Engine", to display search result.
This is the search box and result code:
<html>
<head>
<script>
(function() {
var cx = '000752459719902753414:o5xzy3na1va';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
</head>
<body>
<div >
<gcse:search></gcse:search>
</div>
</body>
</html>
The results displays in this line <gcse:search></gcse:search>
I'm trying to figure out how can I control each result separately on click
thanks in advance..

Display complete Javascript tag in div

I need to place an entire javascript function in a div and show it for testing purposes, how can I accomplish this? I am doing this from code behind in asp.net
EDIT
<!-- Facebook Conversion Code for Website Purchase -->
<script type='text/javascript'>
(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
</script>
Edit: You need to do some trickery: How to show <div> tag literally in <code>/<pre> tag? Which says that you need to escape your < and > characters in your tag to < and > for them to show in the <pre>. The example below has been modified to show this.
You should try using the html <pre> tag, it's commonly supported and does exactly what you're asking for:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
<pre>
<script type="text/javascript">
console.log('hi');
</script>
</pre>
should show something like
<script type="text/javascript">
console.log('hi');
</script>

How to get the Google Custom Search (V2) to execute immediately with a pre-loaded search string?

I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (http://www.google.com/cse/sitesearch/create), and pasted the supplied snippet into the appropriate place, the search box & button components render OK and the user is able to enter a search string, run the search and see the results. So far so good.
However, when the components render for the first time I want to be able to pass a pre-entered string into the box and programmatically have the search executed immediately. This bit is not working.
The code I currently have in place is as follows, consisting of the supplied snippet plus some extra code derived from my reading of the Custom Search Element Control API doc (https://developers.google.com/custom-search/docs/element) and intended to implement the 'execute immediate':
<div class="content-container">
<script type="text/javascript">
(function() {
var cx = '(my search id)';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search> gname="2DSearch"</gcse:search>
<script type="text/javascript">
var element = google.search.cse.element.getElement("2DSearch");
element.prefillQuery(primarySearch);
element.execute(primarySearch);
</script>
</div>
primarySearch is the string I want to automatically search on. When the components render, the string 'gname="2DSearch"' appears briefly then disappears again just before the search components appear, then nothing else happens.
There appear to be some similarities here with this question (unanswered): https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query
I have searched the Web in vain for a number of hours for anything else relevant.
Can anybody tell me why it's not working and/or what I need to do?
My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML & javascript.
Thanks
Jim
I discovered that the Chrome console is showing the following error:
Uncaught ReferenceError: google is not defined
My code now looks like this:
<div class="content-container">
<script type="text/javascript">
(function() {
var cx = '013736134253840884188:fxsx6zqql_y';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
</div>
<div class="gcse-search" data-gname="2DSearch"></div>
<div class="content-container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var element = google.search.cse.element.getElement("2DSearch");
element.prefillQuery(primarySearch);
element.execute(primarySearch);
</script>
</div>
In the console again I'm now also seeing the following:
XMLHttpRequest cannot load (insert here the jsapi link above that I'm not allowed to post). Origin (insert here the URL for my localhost) is not allowed by Access-Control-Allow-Origin.
There are numerous references to similar errors to this all over the Net, each one slightly different, with solutions proposed referring to JSON, JQUERY, AJAX etc.etc., but nothing that I have found seems directly relevant to what I am trying to do (ie make available to my code the file or library in which 'google' is defined), and nothing that I have tried has worked.
Talk about trying to find your way through a coalmine with a candle... :)
Cheers
I've got it working with the gcse callback option (I also changed my layout in the CSE Control Panel to prevent the default overlay).
<script>
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({gname:'gsearch', div:'results', tag:'searchresults-only', attributes:{linkTarget:''}});
var element = google.search.cse.element.getElement('gsearch');
element.execute('this is my query');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function() {
var cx = 'YOUR_ENGINE_ID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="results"></div>
Can you pass the search term via the URL?
<script>
(function() {
var cx = 'YOURID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox queryParameterName="term"></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
If you call your "search" page via yourdomain.com/search?term=searchword the search results appear immediately.
<gcse:search gname='abcd'></gcse:search>
And when the page loaded:
google.search.cse.element.getElement('abcd').execute(query);

GA - E-commerce not tracking items

I have severe trouble finding the issue in the following javascript code.
Google Analytics is tracking my transactions just fine, but it does not show any products.
This code is taken from the "view sourcecode" at the receipt page.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'xxxxxxx-x']); // I replaced my account no.
_gaq.push(['_trackPageview']);
_gaq.push(['_set', 'currencyCode', 'DKK']);
_gaq.push(['_addTrans',
'28996',
'xxxxx.xx', // I replaced the domainname with xxxxx.xx
'104.00',
'20.80',
'0.00',
'fredercia',
'Denmark'
]);
_gaq.push(['_addItem',
'28996',
'150649',
'BRAUN ORAL-B ELTANDBØRSTE',
'99.00',
'1'
]);
_gaq.push(['_addItem',
'28996',
'150000',
'5 dages LOP-salg',
'5.00',
'1'
]);
_gaq.push(['_trackTrans']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Can anyone see the issue here?
Looks like you're missing the category parameter to _addItem -- see the Google Docs for _addItem.
While the category parameter is optional, leaving it out will cause the required quantity parameter to be missed.
You can pass an empty string for category if you don't have one:
_gaq.push(['_addItem',
'28996',
'150649',
'BRAUN ORAL-B ELTANDBØRSTE',
'',
'99.00',
'1'
]);

Help with GATC and var _gaq = _gaq || [];

Here is my GATC. It is located in the FOOTER of my application.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXX-XX']);
_gaq.push(['_setDomainName', 'mysite.com']);
_gaq.push(['_addIgnoredRef', 'mysite.com']);
_gaq.push(['_setCustomVar',1,'UserType','Visitor', 2]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
If I want to set some new custom variables in the BODY page, how would I do that?
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setCustomVar',2,'NewVar','Name', 2]);
</script>
Or
<script type="text/javascript">
_gaq.push(['_setCustomVar',2,'NewVar','Name', 2]);
</script>
To summarize:
I need to define some custom variables in the body of a page and my GATC is in the footer. I'm not quite sure the meaning of _gaq = _gaq and how it will effect this. Should it be in the snippet to define the custom variable in the body and then again in the GATC in the footer?
var _gaq = _gaq || [];
This line uses existing _gaq array or creates a new one and assigns to _gaq if it hasn't been defined(or contains falsy value). Therefore your first option (containing _gaq assignment) is better.

Categories

Resources