Most publishers will already have one of these, it's a tool where you can place agency tags, click a button and magically have your click macro inserted. What I will do here is show you how you can build one using just HTML and javascript so they can be hosted on an intranet site, or users can keep them on their desktop and use one. This first part will go through how to build the page and touch lightly upon the next steps.
1) tools you will need:
for this little tool all we need is:
- a text editor (my favourite is textpad)
- a browser to test (I like to test mine in IE and Firefox, though usually for a tool I will also test in safari, chrome and opera as well)
- examples of agency tags (you should be able to get these from past campaigns)
2) The foundation
a few places will have a tool for each tag, what we'll try and do is create a single page with a simple interface. All the user should see is a box to place the tag and a big friendly button that will run our scripts. Later I will go through how to extend the tool and the addition of other buttons that will do things like strip iframes, and even wrap the tag in popunder code.
3) first step
open up your text editor and put in the framework for an html page: <html><head><script></script></head><body></body></html>. Best to put them on new lines.
4) the interface
All we need is a textarea and a button in a form. So between your body tags put in:
<form name="theForm">
<textarea rows=20 cols=20 name="myTag" id="myTag"></textarea><br>
<input type="button" value="go" onClick="">
</form>
you now have a basis you can work from. You can use the onClick for the button to call a javascript function and you can view and alter the textarea value using document.getElementById( "myTag").value - or document.theForm.myTag.value .
And that's it - now you have a nice clean interface which we can use for the next How To!
Tuesday, March 17, 2009
How To: improve a flash template file
For those of you using Atlas, or other systems that allow you change the template file that a flash ad uses - consider the below points and whether they are in your current template, and whether you should change to make a more robust functioning template.
1st check: Are you using flashvars?
long ago flash templates would pass variables to the flash file in the query string. The problem with this method is that the URL may become too long and the browser may drop some information. Try using flashvars to pass things like your clickTag < http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16417 >
2nd check: Are you escaping ampersands in the click URL?
make sure you are escaping the ampersand before putting it in to the flashvar string. New ampersands tell the script that it is a new variable being passed. You may like to experiment with only escaping the query string, or just replacing all ampersands with %26 using a .replace() function.
3rd check: Is wmode set?
wmode should always be set - and usually to opaque. This will prevent problems with dhtml menus and other flash files when they are over the top of one another
4th check: how does the backup work?
Have a look where the script and no script blocks are. I have seen a couple of sniffers where if flash wasn't installed and javascript was, it would show the backup twice.
5th check: Secure calls?
If you have secure sites - consider checking the document.location for https, and if present, update all other calls on the page to use https in the code.
6th check: Eolas issue
This should no longer be a consideration for updated browsers, do you need to keep that external javascript call to allow for it?
***UPDATE***
There is another enhancement that I neglected to mention as it is for the preview screen rather than the live template. If you use the same template for previewing a flash ad as the live one then you can put a check in for the document.location before running the below.
Make your background red - this is great for checking that a flash ad has put in it's background correctly and that wmode is setting it to opaque. you can do this with the simple document.bgColor="red";
1st check: Are you using flashvars?
long ago flash templates would pass variables to the flash file in the query string. The problem with this method is that the URL may become too long and the browser may drop some information. Try using flashvars to pass things like your clickTag < http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16417 >
2nd check: Are you escaping ampersands in the click URL?
make sure you are escaping the ampersand before putting it in to the flashvar string. New ampersands tell the script that it is a new variable being passed. You may like to experiment with only escaping the query string, or just replacing all ampersands with %26 using a .replace() function.
3rd check: Is wmode set?
wmode should always be set - and usually to opaque. This will prevent problems with dhtml menus and other flash files when they are over the top of one another
4th check: how does the backup work?
Have a look where the script and no script blocks are. I have seen a couple of sniffers where if flash wasn't installed and javascript was, it would show the backup twice.
5th check: Secure calls?
If you have secure sites - consider checking the document.location for https, and if present, update all other calls on the page to use https in the code.
6th check: Eolas issue
This should no longer be a consideration for updated browsers, do you need to keep that external javascript call to allow for it?
***UPDATE***
There is another enhancement that I neglected to mention as it is for the preview screen rather than the live template. If you use the same template for previewing a flash ad as the live one then you can put a check in for the document.location before running the below.
Make your background red - this is great for checking that a flash ad has put in it's background correctly and that wmode is setting it to opaque. you can do this with the simple document.bgColor="red";
Tools of the Trade
There are many handy bits of software and plugins around. Here is a list of things that I use to maximise efficiency and help debug. What are some of your favourite?
Firefox
- Firebug (used for debugging DOM and javascript)
- Greasemonkey (can alter how javascript acts)
- IMacros (if you're using a web frontend you can make macros to enter vast sets of creative for you from a csv file!!!)
- HTTP watch (http headers)
- JSView (quick view of javascript files)
- Web Developer (handy toolbar)
- firecookie (manage cookies)
IE
- IE7Pro (allow you to mod it's behaviour)
- script debugger (check out javascript files and what they call)
- Fiddler (HTTP headers)
- multiple IE (run ie6 alongside ie7 - doesn't work so well for rich media)
- IE Developer toolbar (DOM inspector)
- Bookmarklets ( https://www.squarefree.com/bookmarklets/webdevel.html - generated source especially)
Flash
- Action Script Viewer (for clicktag check)
- URL Action Editor (for small fixes)
- Sothink SWF Decompiler (get to the nuts and bolts)
Wireshark (network analyser)
Chrome (browser)
Safari (browser)
Opera (browser)
Textpad (regex and replace all is your friend)
Excel (spreadsheet - VLookup is your friend)
GIMP (image manipulation)
LogMeIn (log in to your computer remotely)
Firefox
- Firebug (used for debugging DOM and javascript)
- Greasemonkey (can alter how javascript acts)
- IMacros (if you're using a web frontend you can make macros to enter vast sets of creative for you from a csv file!!!)
- HTTP watch (http headers)
- JSView (quick view of javascript files)
- Web Developer (handy toolbar)
- firecookie (manage cookies)
IE
- IE7Pro (allow you to mod it's behaviour)
- script debugger (check out javascript files and what they call)
- Fiddler (HTTP headers)
- multiple IE (run ie6 alongside ie7 - doesn't work so well for rich media)
- IE Developer toolbar (DOM inspector)
- Bookmarklets ( https://www.squarefree.com/bookmarklets/webdevel.html - generated source especially)
Flash
- Action Script Viewer (for clicktag check)
- URL Action Editor (for small fixes)
- Sothink SWF Decompiler (get to the nuts and bolts)
Wireshark (network analyser)
Chrome (browser)
Safari (browser)
Opera (browser)
Textpad (regex and replace all is your friend)
Excel (spreadsheet - VLookup is your friend)
GIMP (image manipulation)
LogMeIn (log in to your computer remotely)
Subscribe to:
Posts (Atom)
Posts
