How does Google Swiffy implement clickTag for HTML5 banner ads? - html

First, I tried finding an option to prevent Swiffy from compressing/minifying all the data when doing an export to HTML5 from Adobe Flash Pro. But no dice.
Even if I was able to read the unminified Javascript that Swiffy exported, I don't think there would be a simple function call for the "clickTag".
It's likely defining the variable clickTag in the huge haystack of {index: #, type: #}, and then doing processing each operations to eventually call the window.open() method (or something similar).
This is how it currently outputs (minified)
Does anyone have any clue how Swiffy implements clickTag?
Or what would be the Javascript equivalent that does the same job?

Swiffy uses the core API of the environment where the ad is served. If it's a DoubleClick Rich Media ad, it does use Enabler.exit("url").
If you want to have a better control on your output file, I'd suggest having a look at Google Web Designer. The closest experience to flash development in the HTML5 - JS era.

Google instructions are here, for plain HTML5 (non-swiffy) click tags.

At the bottom of the file is a snippet of code like this:
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
Add this right before stage.start(); to mimic previous flash behavior. Ensure you use the proper capitalization.
stage.setFlashVars("clickTAG=http://stackoverflow.com");
**Note: Ensure to use url encoding if there are parameters...doesn't seem to like it otherwise

Related

google closure library usage from google app scripts using HtmlService

Is it possible to access google closure library functions from google app scripts via HtmlService? The html files in the google scripts seems to be filtering out anything related to closure library.
project: I am exploring DOM manipulation utilities from Google Closure library from within the google app scripts using HtmlService. I intend to run this as a stand alone web app.
The closure functions work when directly loaded into the browser from its local client environment - but they dont work when injected from GAS app via the HtmlService utility.
Here is the code I am using in the GAS.
html file
<html>
<head>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
function c_sayHi() {
var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
</script>
</head>
<script>
function c_updateButton(date, button) {
button.value = "clicked at " + date;
}
</script>
<body onload="c_sayHi()">
<input type='button' value='Never Clicked'
onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
<input type='button' value='Never Clicked'
onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
</body>
</html>
Google Script file
function s_getCurrentDate() {
return new Date().toString();
}
function doGet(e) {
return HtmlService.createTemplateFromFile('hello').evaluate();
}
I have prefixed c_ to client side functions and s_ for server side fns. When running this as a web app,
Function c_sayHi has no effect - I am not sure if it is even invoked.
Functions s_getCurrentDate and c_updateButton work fine as described in google's documentation https://developers.google.com/apps-script/html_service.
Is there a way to get closure library working from the web apps as attempted above?
Couple of things here -
All .gs files is JavaScript that runs on the server side. So the DOM is not really relevant there.
You can run client side JavaScript by returning code in HtmlService. This is what I believe you want to do. However, jQuery is the best supported library on this approach. Closure might end up working but the team does not specifically test against that library.
The problem is that Closure's dependency structure is executing before the window load event, otherwise it will not work. So any require and provide statements are taken care of way before window load. When you inject them through the HTML Service, you are forcing their execution at a different stage then required, which causes everything to fail.
If you would be using a COMPILED Closure Library source, you will not have any problems with running Closure. Learn how to use the Compiler and Builder to make Closure Work properly. Also, you can use lazy loading to simulate your HTML Service.
With that, you can make javascript load dynamically onclick, onload or whatever the hell you want. This is called lazy-loading and it is used as a standard practice for all large web applications. Monitor the Network tab of Firebug when browsing through Gmail or Facebook.
Arun Nagarajan is right, jQuery is the easier solution but if you are doing something proper that requires breadth, scale and speed, jQuery is a toy for kids.

Html from Silverlight (not out of browser)

I am trying to open HTML file from the local URI which I use as XML Editor, to edit xml data that come from Silverlight application, then close browser window and return back edited xml data to the Silverlight application.
I tried to use HtmlPage.Window.Navigate but I don't quit like it.
I have tried using a method from: http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
but instanly got an exception "failed to invoke ShowJobPlanIFrame"
Is there any way to handle this task?
"Out of browser" mode doesn't fit.
Thanks.
===========================================================================
Update:
It worked out using IFrame overlay.
Button click invokes the following code in C#:
var scriptObject = (ScriptObject)HtmlPage.Window.GetProperty("ShowJobPlanIFrame");
scriptObject.InvokeSelf(url);
Where "ShowJobPlanIFrame" is as defined at:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
This allowed me to pass data into XML editor and then get it back.
An error with JavaScript function invocation I told above, was my fault in JavaScript code itself.
A very similar scenario: https://stackoverflow.com/a/7919065/384316
Try using an iframe overlay, then you can load any HTML-like content.
There is an excellent explanation of how to do this here:
http://www.wintellect.com/cs/blogs/jlikness/archive/2010/09/19/hosting-html-in-silverlight-not-out-of-browser.aspx
It worked out using IFrame overlay.
Button click invokes the following code in C#:
var scriptObject = (ScriptObject)HtmlPage.Window.GetProperty("ShowJobPlanIFrame");
scriptObject.InvokeSelf(url);
Where "ShowJobPlanIFrame" is as defined at:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
This allowed me to pass data into XML editor and then get it back.
An error with JavaScript function invocation I told above, was my fault in JavaScript code itself.
Did you try NavigationFramework of Silverlight? It's capability may support your needs in a more simple way than using multiple browser pages.

Possible channels of communication between Javascript on HTML page and a windows EXE?

Here's the thing.
A two-way communication (RPC-style) is needed between JavaScript on HTML pages provided by a web server online (with session-management and whatnot) and a windows EXE application running on the PC of the website visitor.
Both are parts of the same 'package' and should be able to communicate.
There is the use of a custom protocol for sure, but some browsers like Chrome & Safari sometimes have issues with custom protocol handling, so it is not reliable enough ...
Another possibility is to build a minimal web-server inside the EXE, so the communication would work with all browsers.
It is possible to develop an extension / plugin for each browsers separately, but it's a daunting task..
The usage of flash / java seems not possible for this task because of sandboxing, but I'm not sure about this ??
Do you have any other ideas ?
You can use an embedded ActiveX (COM) object and communicate between both platforms. I've done it (and would not have believed it possible had I not). It's nasty but it works. In the project I used it on I had no choice (which is about the only reason to ever do this). I built the COM object in C#.net and exposed an interface to COM for use on the page. It goes something like this:
function doSomethingInteresting() {
// in your js:
var obj = document.getElementById('yourObjectId');
obj.MethodNameDefinedOnYourCOMObject("someParameterValue");
}
// and your HTML looks like this; note that you can even catch events thrown from the COM object in Js...
<body>
<form>
<object id="yourObjectId" height="0" width="0" classid="clsid:99999999-9999-9999-9999-999999999999" onerror="oError()" VIEWASTEXT></object>
<script for="yourObjectId" event="ThisIsTheJavaScriptEventHandlerMethod(parameterName)" language="javascript">
// event handling here for the COM object
function yourObjectId::ThisIsTheJavaScriptEventHandlerMethod(parameterName) {
// you can process the parameterName passed from the object here
}
</script>
</form>
</body>
Happy coding!

Get Current Browser URL - ActionScript 3

I'm trying to get current browser url. I have already tried with External Call, and it didn't work. And with loaderInfo.url I receive the current SWF url.
Give this a go:
import flash.external.ExternalInterface;
var url:String = ExternalInterface.call("window.location.href.toString");
if (url) textfield.text = url;
should do the trick.
There are a couple of ways to solve this problem, however all of them involve the use of JavaScript to query the browser directly.
My preferred way to solve this problem would be to provide the URL via a flashVar property, direct from the embed code (personally, I would reccomend using SWFObject to make this easier); don't forget you will need to URL Encode it to avoid markup issues.
var flashvars = {
browserURL: escape(location.href)
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars);
Now you will be able to access the Browser URL via the loaderInfo object:
trace(stage.loaderInfo.parameters["browserURL"]);
note that this will only work if you have control of generated HTML for your SWF file - if users are going to be grabbing the SWF and writing their own embed HTML, it's not going to work.
If you don't have control of the flash embed HTML, then you will need to get flash to query the browser at runtime using the ExternalInterface class; other people have suggested the use of "window.location.href.toString" however this can prove problematic in IE6, I find the following works reliably across all browsers
const browserURL : String = ExternalInterface.call("eval", "window.location.href");
Note that in order for this to work, you will need to grant JavaScript access to your Flash movie, this is done, again, via the HTML embed code and the allowScriptAccess param
var url:String = loaderInfo.loaderURL;
seems to work too.
I would try passing the required info in as a flashvar. Not the best out of the box solution I know, but it will work.
Flash: FlashVars in AS3
i think its posible to use the external interface an do it with javascript window.location
I have been using flash for a long time and never noticed this one. It only gives the domain though for security. It does work through loaded swfs as well. Not sure about iframes.
Security.pageDomain

How do hosted services like UserVoice embed their content on other web sites?

How do hosted services like UserVoice embed their content on other web sites?
I see that it is via including a JavaScript file from the service provider on your own page, however, what I'm interested in are the building blocks for creating a service like that.
For example, do they use a library like jQuery, mooTools, or prototypejs and how do they avoid namespace clashes?
Also wondered if there were any books, articles, blog posts that go over this specific use of JavaScript (not looking for general resources on JavaScript).
Regards and thanks in advance,
Eliot
Here is a great tutorial I found on How to build a web widget (using jQuery)
Generally, what you are describing is called a "Javascript Widget" (UserVoice's just happens to show up on the side of the page).
There is a good tutorial about creating Javascript Widgets that you can check out.
The basic structure of such an embeddable service would be:
If the service doesn't mandate that the script is to be included at the bottom of the page, hook the body onload event, without stepping on the toes of any existing handlers (by intercepting the existing handler function, which could in turn be chained to other functions).
Inject new HTML elements into the document. The HTML code would most likely be inlined into the script as string literals as setting innerHTML on a single injected element would be easier and faster than direct DOM manipulation using a flurry of function calls.
The entire script should live inside a closure to avoid name clashes.
A JS framework may or may not be used; caution is required when including a framework since it could clash with a pre-existing, different framework, or a different version of the same framework.
EDT: Generally you'll make your client/customer/friend include a script in their page, then via that script you can do following:
In pure JS you can load scripts from remote location (or not so remote) dynamically via
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'your/remote/scripts/path.js';
document.getElementsByTagName('body')[0].appendChild(script);
// $.getScript('your/remote/scripts/path.js'); in jquery but you'll be sure jQuery loaded on remote site
Then script you loaded can perform different actions like creating elements like this
var body = document.getElementsByTagName('body')[0];
var aDiv = document.createElement('script');
/* here you can modify your divs properties and look */
body.appendChild(aDiv);
// $('').appendTo('body'); for jQuery
For deeper look into JavaScript you can read for example Javascript: The Good Parts or Definitive Guide To Javascript.