I'm working on a plugin that will be added to external sites, something like the Meebo/Wibiya bar. I'm looking into how to version my files.
What I want to achieve:
The website only has to add a few lines of <script> to their site.
I'll be able to silently upgrade the js file they're using, if I choose to, without them modifying their code.
I'll be able to serve different js files for different websites.
JS files will be cached unless they change.
I'll be able to perform A/B tests (i.e., have 2 different JS files loaded for a single website, randomly chosen for each visitor).
How can I go about achieving all these goals? Or at least as many of them as possible?
Of the top of my head, I think something like the following should get things moving.
You could use some sort of API key to identify the remote sites,
you could also use the HTTP referer but that's not completely
reliable. Then, copy what Google Analytics does and get the clients
to embed a little bit of JavaScript like this:
var _edan_cfg = _edan_cfg || { };
_edan_cfg.apiKey = 'The-API-key-goes-here'; // Just in case you want it later.
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.async = true;
e.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.your-domain-name.com/some_sensible_path/'
+ encodeURIComponent(_edan_cfg.apiKey);
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
})();
That should satisfy your first two points.
On the server side you extract the API key from the incoming path,
that key tells you what site you're talking to so you can send back
whatever JavaScript is appropriate. You can use the HTTP caching
headers to attempt to control caching. That should take care of
points two and three.
The last requirement is a bit more interesting but nothing impossible.
The script you send back can always support multiple renderings or
behaviors, the script can also choose which behavior based on
whatever conditions you can think of. The script can also load more
scripts from your server by creating more <script> tags as above.
Related
If I have JS script on several different websites, is it possible to enable or disable script execution for specific sites? If this isn't possible, other suggestions for implementation are welcome.
Here's the application:
I have a script tag with my JS source link that site owners can put on their website to enable interaction with my service. However, I would like to be able to enable/disable the service for specific sites so as not to deploy it until they are ready.
note: The script tag also includes site verification information so it gets put on their site before they are ready to deploy. This saves the step of putting in a site verification tag and then going back and putting in the script.
You would want them to put your .ashx handler on your website, then make that return the javascript.
Follow tutorial for ashx page if you are unsure how to http://www.brainbell.com/tutorials/ASP/Generic_Handlers_(ASHX_Files).html
in the processrequest() function:
Check to see if they have it enabled you can use the querystring to see which website it is https://msdn.microsoft.com/en-us/library/system.web.httprequest.querystring(v=vs.110).aspx in the code below there is ?yourwebsitedomain=customersdomain so you would query for "yourwebsitedomain" and you would get "customersdomain"
If they do then Get the bytes of your file using Encoding.UTF8.GetBytes(File.ReadAllText(filename))
and write the results to the output
context.Response.OutputStream.Write(FileBytes, 0, FileBytes.Length);
context.Response.OutputStream.Flush();
Your Customers Website:
<script>
(function() {
var c = document.createElement('script');
c.type = 'text/javascript'; c.async = true;
c.src = "http://yourdomane/yourhandler.ashx?yourwebsitedomain=customersdomain";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(c,s);
})();
</script>
Hope this helps.
i am new here and i have a javascript tracking code
var _trackingCode = '5sulid5e';
(function() {
var wa = document.createElement('script');
wa.type = 'text/javascript';
wa.async = true;
wa.src = '//cdn.8digits.com/automation.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wa, s);
})();
i want to customize that for work on another website.
it works on vestel.com.tr but it doesnt work on mavi.com .
How can i customize that script for mavicom.
Thanks for your help.
Perhaps, you can hack this by writing a proxy, as some vendors may bind tracking IDs with a specific domain.
Forward the ajax from the vendor's JS code to your proxy server. In your proxy server modify the origin request header as the registered header i.e. vestel.com.tr .For this you will need to modify the JS code provided by vendor located at cdn.8digits.com/automation.js and then in script tag of your website provide the script source as your hacked JS, NOT the actual one.
PS you can't modify the origin header in the browser's AJAX itself due to security restriction by browsers.
I don't know if this is the right place to ask this question but I'm just going to do it.
I've been trying to figure out how I want to give out my web application.
This is my situation:
I've created a web application. People who want to use this application are free to do so. BUT they need to be signed up on our website.
The application needs to be bound to a unique key. This key is generated as soon as they sign up on our website. The application is hosted on our server.
The web application needs to be easy to implement.
I've seen:
I've seen other services generating a JS script, for example:
<script type='text/javascript' data-cfasync='false'>window.exampleApi = { l: [], t: [], on: function () { this.l.push(arguments); } }; (function () { var done = false; var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; script.src = 'https://app.example.com/VisitorWidget/WidgetScript'; document.getElementsByTagName('HEAD').item(0).appendChild(script); script.onreadystatechange = script.onload = function (e) { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { var w = new PCWidget({c: 'e01fe420-5c14-55p0-bbec-229c7d9t2f0cf', f: true }); done = true; } }; })();</script>
What have I done so far:
I have made a simple web application that requires you to sign up and log in. From this point on you get an iframe that you can use. I used an iframe just for testing. The web application consists of HTML, CSS, PHP(mostly), JS and jQuery.
I've tried:
I've tried this. I got stuck on the Python part. I have never used/looked into this language.
Also, I'm kind of afraid that people are going to "use" my web application without the right to do so.
What I'm thinking is that the generated key, needs to be send to our website to check if the key is correct.
Tips, tricks, guides?
Do you have any tips or tricks? Maybe critisism?
JSONP, CORS or anything? Never done JSONP or CORS, so any tips about that would be nice too!
Anything is appreciated!
Yes, in general, you got the idea right.
The client signs in to your website, registers his domain and receives ID (lets call it that way)
He implements the js in his site with the ID properly implemented
An authentication request that holds the ID is sent to server; also validating the domain (otherwise, it would be easy just to copy js and put it in my site).
What concerns exact implementation - there are tons of examples out there. There is no one-size-fits-all way and that is the best part of it - fully custom to fit your needs. For example, twitter
<a class="twitter-timeline"
data-widget-id="600720083413962752"
href="https://twitter.com/TwitterDev"
data-tweet-limit="3">
Tweets by #TwitterDev
</a>
Since php tag is provided and used, I see no reason why to mix it with python unless something really specific is required (and I doubt that). So stick to php for now. About the security of the application - using the ID and some domain that requests will be validated against is fair enough. Maybe there are some extra metrics larger sites/services are using, but don't worry about it much.
Extra read:
What are the differences between JSON and JSONP?
CORS - What is the motivation behind introducing preflight requests?
According to the Disqus comment code instructions, you're supposed to include their JavaScript as follows:
(function () {
var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
The location of the JavaScript is based on a shortname that is specific to your site. Why does Disqus do that instead of using one global location for their JavaScript (e.g. cdn.disqus.com/count.js). If the JavaScript is the same for each site, it seems silly to require everyone to redownload the JavaScript for each Disqus-enabled domain they visit. If the JavaScript is different based on the shortname, why not just use a shortname variable that gets set before the global js is loaded?
Disqus is a fairly large and sophisticated company, so I'm assuming that this is a conscious and purposeful decision on their part. Why did they go this route?
Actually they are using a CDN to deliver count.js.
If <shortname> exists
http://<shortname>.disqus.com/count.js redirects to something like
http://mediacdn.disqus.com/1334018047/build/system/count.js.
To reduce traffic count.js(on the CDN) is delivered with an Expires-Header that allows caching it up to a month.
But imagine they need to change the code or block some sites or deliver special features to others, it would take up to a month until all clients get the changes. To reduce that timespan they probably use this redirect (which is cached for only up to 10 minutes), so code/feature changes will reach every client within 10 minutes.
It gives them a lot of flexibility and does not require the user to change the include code ever.
To optimize my site i have set up a static subdomain for content such as images, css and javascript. How do i stop the google analytics tracking cookie from being sent to my static subdomain, but still to both example.com and www.example.com?
Have already looked through some of the documentation with no luck
You can't have a cookie that gets sent to www.example.com and example.com but not othersubdomain.example.com.
You can in theory have a cookie that gets sent to example.com but not subdomain.example.com, but it doesn't work in IE.
This is why you should not use a no-www example.com address when you are planning on using subdomains with their own security context. It's best to have only one of www.example.com and example.com as the ‘proper’ URL anyway. So set up a redirect for example.com to go to www.example.com, and cookies won't be shared unless you deliberately set domain=.example.com on them.
If you're having issues with Google Analytics creating a cookie for every domain, including your subdomain ones. Here's my solution that I've posted elsewhere on the subject.
By golly I think I've found a temporary solution to the broken code supplied by Google.
If you go into GA and get the non-async code and choose:
One domain with multiple subdomains
Examples: apps.konoro.org
store.konoro.org
video.konoro.org
You'll see that it gives you a code sample with .konoro.org. Change that to www.konoro.org and all cookies will have: .www.konoro.org (with a dot in front of them).
Now if you go back to your Async code, there's only one difference apart from being Async. You need to put ['_setDomainName', 'www.konoro.org'], as the second option rather than after ['_trackPageview'].
For some reason, with this being the second option, it works fine.
My final code is:
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-XXXXXXX-1'],
['_setDomainName', 'www.konoro.org'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();