zanox MasterTag Developer Guide

Transcription

MASTERTAG
DEVELOPER
GUIDE
TABLE OF CONTENTS
1
2
3
4
5
Introduction ..................................................................................................................... 4
1.1
What is the zanox MasterTag? ............................................................................. 4
1.2
What is the zanox page type? .............................................................................. 4
Create a MasterTag application in the zanox Application Store ................................ 6
2.1
Basic application data ........................................................................................... 6
2.2
Application settings ............................................................................................. 10
2.2.1
What are application settings? ........................................................................... 10
2.2.2
Naming conventions for application settings ...................................................... 10
2.2.3
Create an application setting for your MasterTag application ............................ 11
2.3
"Hello World" sample application ........................................................................ 14
Develop an application ................................................................................................. 16
3.1
Create a basic code template ............................................................................. 16
3.1.1
Coding requirements .......................................................................................... 16
3.1.2
Local variables.................................................................................................... 17
3.1.3
Page type settings .............................................................................................. 17
3.2
Applications and external data ............................................................................ 18
3.2.1
Data retrieval methods ....................................................................................... 18
3.2.2
Reference of automatically transferred data ...................................................... 19
3.3
zanox helper functions ........................................................................................ 20
3.3.1
How do I use helper functions? .......................................................................... 20
3.3.2
Reference of zanox helper functions .................................................................. 21
3.4
Things you shouldn't do in your application code ............................................... 23
3.4.1
Requirement 1: Do not use external JavaScript libraries ................................... 23
3.4.2
Requirement 2: Do not use global JavaScript variables and /or functions......... 23
Test an application ........................................................................................................ 25
4.1
Create an empty test page ................................................................................. 25
4.2
Simulate application settings in your test environment ....................................... 27
Release an application ................................................................................................. 29
5.1
Optimise the application source code ................................................................. 29
5.2
Application approval............................................................................................ 29
5.3
MasterTag approval checklist ............................................................................. 33
ZANOX.de AG | MASTERTAG DEVELOPER GUIDE | LAST UPDATED 06/2012 | PAGE 2
6
Tips for advanced users ............................................................................................... 34
6.1
Develop an application without generating a test code ...................................... 34
6.1.1
Speed up application development .................................................................... 34
6.1.2
Create an appropriate test page ......................................................................... 35
1
Introduction
1.1
What is the zanox MasterTag?
A zanox MasterTag is a set of 7 script containers which advertisers implement on their websites.
These containers asynchronously load applications that provide value added services. For instance,
advertisers could load retargeting or web analytics services into their MasterTags or use the
MasterTags as generic container tags.
In the following sections of this document you will learn how you can develop applications for the
zanox MasterTag and provide them to zanox advertisers.
1.2
What is the zanox page type?
Each of the 7 script containers can only be used on specific pages within the advertiser website.
These pages are called zanox page types. The following page types exist:
Page Type
Description
home
This page type refers to the homepage of the
advertiser website, shop, etc.
product
This page type refers to all pages where the user
can find details on a selected product.
search
This page type refers to a page where the user
can perform product searches and search results
are listed.
category
This page type refers to all pages which list
product categories.
basket
This page type refers to the page where the
shopping basket is displayed to the user prior to
purchase.
checkout
This page type refers to the sales confirmation
page which is displayed to the user after
purchase.
generic
This page type refers to any other pages on the
advertiser’s website.
If you develop a MasterTag application, it must be able to work on all of the above pages. The zanox
page type is passed to the application as a setting at runtime.
The first step you should do as a developer is to think about which page types your application must
support. For instance, if an application has to retrieve data on the product page (e.g. the ID of the
displayed product) and on the checkout page (e.g. check the product the user bought against the
product the user viewed on the product page), it has to support the two page types product and
checkout.
2
Create a MasterTag application in the zanox
Application Store
2.1
Basic application data
Developers create and distribute MasterTag applications via the zanox Application Store. Note that
you need to register with zanox as publisher to be able to log in to the zanox Application Store.
To create a new MasterTag application in the zanox Application Store, proceed as follows:
Step 1:
Go to the zanox Application Store at http://apps.zanox.com.
Step 2:
Click on the button Connect with zanox and enter your login credentials (publisher account login name
and password).
Step 3:
Click on the tab Developers in the upper menu bar.
 The developer area of the zanox Application Store opens. The tab Applications for Sales shows a
list of all your applications you may want to make publicly available in the zanox Application Store. If
you have not yet started developing, the list will be empty.
Figure 1: Your applications in the zanox Application Store
Step 4:
To create a new application, click on the button New application
 A new menu bar opens underneath the list of applications.
Step 5:
Click on the tab General and enter the following basic application data:
Field
Description
Application
Name of your application
Application type
For MasterTag applications select the application type Widget
Description
Short description of your application
Detailed description
More detailed description of your application
Format
Size of your application. Select Free Format if the application does not
display data (for example a banner) on a webpage.
Widget width
Application width in pixels. Only required if Free Format was selected.
Select 0 for applications that do not display anything on a webpage.
Widget height
Application height in pixels. See above.
Programming language
Programming language of your application (usually JavaScript)
Search tags
Enter the string “MasterTag” followed by a comma-separated list of zanox
page types your application supports, for example:
MasterTag,home,product,search,category,basket,checkout,generic
Video URL
URL with a tutorial video for your application,
Documentation
URL to external documentation of your application
Website URL
URL to your company’s website
Version
Version of your application
Figure 2: Basic information about your application
Step 6:
Optionally click on the tab Application T & C to add some terms and conditions. These terms and
conditions will be displayed to all users that get your application from the zanox Application Store.
Figure 3: Terms and conditions of your application
Step 7:
Finally, define the user group for your application. MasterTag applications are always developed for
advertisers, so click on the tab Categories and select Applications for Advertisers.
Figure 4: Application target group
Step 8:
Click the button Save to save your basic application data.

The new application and its basic application data will be saved in your developer area of the
zanox Application Store.
2.2
Application settings
2.2.1 What are application settings?
Application settings are some kind of configuration parameters you may want to use for your
MasterTag application. The values of the application settings are passed to your application at runtime
and can be either static or computed dynamically by the zanox loader script (zanox.js script).
Application settings are used by your MasterTag application to retrieve information from different page
types of the advertiser’s website.
Imagine a scenario where your application needs to retrieve the following information:

On the product page: ID of the displayed product

On the checkout page: Total amount of money the user spent on a sale
In order to retrieve this information you will have to create two application settings. The next sections
will show you how to create those settings.
2.2.2 Naming conventions for application settings
If you create a new application setting, you have to follow a special naming convention. This is
necessary so that advertisers can understand which application settings retrieve which information
from which page types. Setting names should look like this:
<prefix>_<name>
Use camelCase for application setting names (e.g. mySuperSpecialSetting). The prefix must be one of
the following strings (which match the names of the zanox page type, see section What is the zanox
page type?):
Prefix name
Description
Example
home
Application setting that only
retrieves information from the
homepage of the advertiser’s
website
home_productId
product
product page of the advertiser’s
website
product_productId
search
search results page of the
advertiser’s website
search_searchString
category
category
page
of
the
category_categoryName
basket
basket page of the advertiser’s
website
basket_products
checkout
checkout
page
of
the
checkout_totalAmount
2.2.3 Create an application setting for your MasterTag application
To create a new application setting for your MasterTag application, proceed as follows:
Step 1:
Click on the MasterTag application from your list of applications for which you want to create a new
application setting.
Step 2:
Click on the tab Widget Code, then click on the button New setting.
Figure 5: Create an application setting for your MasterTag application
 A dialogue window opens.
Step 3:
Enter the name and the default value for the new application setting into the dialogue window.
Name is the setting key which you use in your application source code to retrieve the setting value.
For instance, a valid name could be "product_productID ". For more information on naming
conventions see section Naming conventions for application settings.
Value is the default value which is passed to your application if no other value was specified for this
setting during the configuration of a specific MasterTag.
You can also define your setting as mandatory. Advertisers must provide the values for mandatory
settings in their live environments in order for the MasterTag application to function properly.
Figure 6: Create an application setting
Step 4:
Click the button Create to create the new application setting.
 The application setting is displayed in your list of settings available for the MasterTag application.
Figure 7: Your application settings
"Hello World" sample application
2.3
Now you can start writing your application code. This is the source code of a very simple hello world
sample application:
<script type="text/javascript">
zanox.setCallback("INSERT YOUR APPLICATION ID HERE", function(data) {
var applicationId = data.app.id;
var message = "Hello World! I'm application " + applicationId;
alert( message );
});
</script>
After loading the sample application displays a message which contains the application ID. In order for
the sample application to work you need to perform the following steps:
Step 1:
Replace the string "INSERT YOUR APPLICATION ID HERE" with your actual application ID first. You
can find your application ID on the tab zanox Keys (see next section Create a basic code template).
Step 2:
Click on the tab Widget Code and copy and paste the code into the appropriate field in the zanox
Application Store.
Figure 8: Sample application code
Step 3:
Click the button Save to save the application code.
3
Develop an application
3.1
Create a basic code template
The most simple valid zanox MasterTag application would look like this:
zanox.setCallback("INSERT YOUR APPLICATION ID HERE", function(data) {
// enter your code here
});
</script>
"INSERT YOUR APPLICATION ID HERE " has to be replaced with your actual zanox application ID.
You can find your application ID on the tab zanox Keys.
Figure 9: Access your application ID
3.1.1 Coding requirements
As an application developer you are free to do what you want in your source code. However, you have
to consider the following coding requirement: You have to call the JavaScript function
"zanox.setCallback" once in your source code and pass the following parameters:

Your zanox application ID

The JavaScript callback function which will act as an entry point for your code.

The JavaScript callback function will automatically be called when a HTML page with a MasterTag
and your associated MasterTag application has been loaded.
The callback function must accept one parameter (called "data" in the example above). The value of
this parameter will be a JavaScript object at runtime which contains some metadata about your
application as well as all the settings you have defined for your application with their actual values.
You can find a full reference of all data passed to this function in the section Reference of
automatically transferred data).
3.1.2 Local variables
In your application code you often access the settings. To simplify this step you can create a local
variable as shown below:
zanox.setCallback("INSERT HERE YOUR APPLICATION ID", function(data) {
var settings = data.app.settings;
// save a shortcut
alert(settings["my_setting_key"]);
// just for test
});
</script>
3.1.3 Page type settings
For a MasterTag application to function properly your application code must be able to identify the
page type it is currently running on (see section What is the zanox page type? for more information).
Your application must support a setting called "pageType" which will be used for that purpose. Below
you will find an example of how to use the “pageTye” setting:
var settings = data.app.settings;
var pageType = settings["pageType"];
// get pagetype
if (pageType == null) return;
// just to be sure
switch (pageType) {
case "basket":
// app runs on basket page, do the following...
break;
case "category":
// app runs on category page, do the following...
break;
case "checkout":
// app runs on checkout page, do the following...
break;
case "generic":
// app runs on any other page, do the following...
break;
case "home":
// app runs on home page, do the following...
break;
case "product":
// app runs on product page, do the following...
break;
case "search":
// app runs on search page, do the following...
break;
}
});
</script>
If you want to use CSS to style your application or use external JavaScript files, just either add HTML
<style> or <script src="..."> tags to your source code.
3.2
Applications and external data
3.2.1 Data retrieval methods
If your application needs external data to function properly, you can use the following methods to
retrieve the required data:

Access the browser DOM directly and parse the HTML document (only works if your application
does not run inside an iFrame).

Use the provided metadata that is automatically passed to your application.

Use the provided settings that are automatically passed to your application.
3.2.2 Reference of automatically transferred data
The following JavaScript object is automatically passed to the application’s callback function you
specify in the zanox.setCallback function call:
var data = {
"mediaslot" : {
"id" : "MASTERTAG_ID",
"height" : 0,
"width" : 0
},
"adspace" : {
"id" : 123
// id of ad space associated to mastertag
},
"app" : {
"id" : "APPID",
// id of your app
"height": 500,
// height of your app (same as in Application Store)
"width": 500,
// width of your app (same as in Application Store)
"container" : {
"id" : "mycontainer"
// container id of your app (see below)
},
"settings" : {
// "list" of all defined settings (keys + values)
"key1" : "value1",
"key2" : "value2"
},
"connectIds" : {
"developer" : "DEVELOPERCONNECTID",
// connect ID of app developer
"publisher" : "PUBLISHERCONNECTID"
// connect ID customer account
},
"renderMode" : "iframe" // app is placed in an "iframe" or "inline" in page
}
};
The application container ID has a special meaning. It is a string which contains the ID of a HTML
element that surrounds your application inside the browser DOM. Usually, this would be a <div>
element.
To add content to the webpage it runs into, you need to modify the browser DOM (insert or manipulate
some DOM nodes) accordingly. But first, you have to find the proper location where to insert your
content.
To add content (e.g. a banner) at the exact same position of the MasterTag code, you have to use the
provided container ID to find the corresponding DOM node. Just call the JavaScript function
document.getElementByID("PROVIDED_CONTAINER_ID") to identify the DOM node. This
works even if there is more than one MasterTag on the same page with the same associated
application. In this case, your application’s callback function is called multiple times for each
MasterTag and each time provides a different container ID.
Find some examples below:
To access the application container <div> use:
var containerNode = document.getElementById( data.app.container.id );
To get the ID of the ad space which is associated to the MasterTag your application was assigned to
use:
var adspaceId = data.adspace.id;
To access a specific setting value use:
var pageType = data.app.settings["pageType"];
To iterate through all available settings use:
for (var key in data.app.settings) {
var value = data.app.settings[key];
alert(key + ":" + value);
}
3.3
zanox helper functions
3.3.1 How do I use helper functions?
You can access a zanox helper function via the global zanox JavaScript object. Its available in any
page that includes the loader script (zanox.js script) regardless of whether the application is loaded
inside an iFrame or not. See the next section for a complete reference of all available functions.
3.3.2 Reference of zanox helper functions
3.3.2.1 Function: version()
Description:
Use this function to retrieve the current version of the zanox.js script.
Parameters:
None
Returns:
A string with the version number.
Example:
alert( zanox.version() );
3.3.2.2 Function: load( url, onComplete )
Description:
This function loads a JavaScript file from the provided URL, executes its content and calls the
provided onComplete JavaScript function when finished.
This function is the most useful of all helper functions. You can use it in your source code to load
external JavaScript files at runtime as well as to make zanox API REST calls (which could also be
treated as external JavaScript files).
Parameters:
Parameter Name
Parameter Description
url
String that contains the URL to load an external Javascript file
onComplete
JavaScript function that is called after executing the file content
Returns:
Nothing
Example:
zanox.load( "http://www.domain.com/scripts/myscript.js" );
3.3.2.3 Function: loadAll( urls, onComplete )
Description:
This function loads all JavaScript files from the provided URLs, executes their content and calls the
provided onComplete JavaScript function when finished.
Parameters:
Parameter Name
urls
String array of URLs to load external JavaScript files
onComplete
JavaScript function that is called after executing the file content
Returns:
Nothing
Example:
var myScripts = [
"http://www.domain.com/scripts/myscript1.js",
"http://www.domain.com/scripts/myscript2.js"
];
zanox.loadAll( myScripts );
3.3.2.4 Function: setCallback( appId, callback )
Description:
This function must be called once you are in your application. It tells the zanox loader script (zanox.js
script) to call the provided callback function after the application with the given application ID has been
loaded. The provided callback function is used as an entry point into your application code.
Parameters:
Parameter Name
appId
Application ID from the zanox Application Store
callback
JavaScript function that is called after the app has been loaded
Returns:
Nothing
Example:
zanox.setCallback("APP_ID", function(data) { /* … */ } );
3.3.2.5 Function: setInnerHTML( node, content )
Description:
Use this function to manipulate the content of the provided DOM node. Basically, the function sets its
value for innerHTML to the passed content. The function takes care of included script tags. If the
content contains a <script src="..."> tag, the referenced external JavaScript file is loaded and
executed. If the content contains inline scripts (via <script> tags), they are executed too.
Parameters:
Parameter Name
node
DOM node whose content you want to modify
content
New content (a HTML string) for the provided node
Returns:
Nothing
Example:
zanox.setInnerHTML( document.body, "<div>Hello World!</div>" );
3.4
Things you shouldn't do in your application code
If you have configured your application to run directly inside the parent page (the Load in iframe check
box is unchecked in the zanox Application Store), you should take special care while coding your
application because it might run on many different websites in different environments. Your application
must not influence the existing functionality of a website. Hence, it is strongly recommended to pay
attention to the below coding requirements.
Please note: If your application runs in an iFrame instead, you can freely design the application code
as the application will be isolated from the website it runs in.
3.4.1 Requirement 1: Do not use external JavaScript libraries
Avoid using external JavaScript libraries like jquery, prototype, etc. Often, those libraries do not work
together or unpredictably influence each other if they are used in parallel on the same HTML page.
JavaScript errors might occur in your application or even in the parent page. As a developer you never
know which other JavaScript frameworks are used by the webpage your application runs in. Hence,
avoid the use of JavaScript frameworks where possible and use only plain JavaScript functionality
instead.
3.4.2 Requirement 2: Do not use global JavaScript variables and /or functions
Avoid using global JavaScript variables and/or functions. Using global JavaScript variables and/or
functions in your source code may lead to an unpredictable behaviour of your application as you never
know if the HTML page, which hosts your application, also uses the same variables or functions. If
both share the same data, everything might go well, but in the worst case, one or both of them will not
function properly anymore. Therefore only use local variables or functions.
Use the JavaScript "var" statement every time you declare a variable. If you leave it out, the variable
becomes global and might cause problems later. In terms of functions, we recommend to create one
global JavaScript object which acts like a container for all your functions (sometimes also called a
namespace object). Assign a unique name to the global JavaScript object to avoid conflicts. If you use
the application code template defined earlier (see section Create a basic code template), declare your
functions with the "function" keyword. These functions will be scoped to the anonymous callback
function we pass to the "zanox.setCallback" method.
Find an example below:
var myLocalVar = "Hello Local";
// local variable
myGlobalVar = "Hello World";
// global, because var is missing!
// this function is NOT global, so it's ok
function sayHello() {
alert( myLocalVar );
}
sayHello();
});
</script>
4
Test an application
4.1
Create an empty test page
If you want to test your application, you have to generate a test code first. To generate the test code
proceed as follows:
Step 1:
Log in to the zanox Application Store and click on the MasterTag application from your list of
applications for which you want to generate a test code.
Step 2:
Click on the tab Widget Code, then click the button Get the code.
Figure 10: Access the application code


 A dialogue window prompts you to one of your ad spaces for which you want to generate the code.
Figure 11: Generate the application code
Step 3:
Click the button Generate code to pull the application code and place the generated code snippet on a
HTML page.
Step 4:
We recommend to create an empty HTML page for testing as shown below:
<html>
<head>
</head>
<body>
<!-put test code from Application Store here (XXXXXXXX is your application ID)
-->
<div class="zx_XXXXXXXXXXXXXX zx_mediaslot">
window._zx = window._zx || [];
window._zx.push({"id":"XXXXXXXXXXXXXX"});
(function(d) {
var s = d.createElement("script"); s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "...js";
var a = d.getElementsByTagName("script")[0]; a.parentNode.insertBefore(s, a);
}(document));
</script>
</div>
</body>
</html>
Step 5:
Save the HTML page anywhere you want (e.g. on your local hard drive) and open it in your browser.
 The application is now loaded from the zanox servers, executed and displayed in the browser after
a short moment of time.
4.2
Simulate application settings in your test environment
To test if your application settings work properly and if the code handles different value combinations,
make some small changes to the generated code from the zanox Application Store. This will help you
simulate how settings are passed.
This line must be edited:
window._zx.push({"id":"XXXXXXXXXXXXXX"});
The push function takes one JavasSript object as a parameter (written in JSON notation). This object
usually contains only one property "id", whose value is the ID of the MasterTag to be loaded. To
simulate passing of settings, add a new property to that object, called "settings".
// same line as above, only formatted differently for better understanding
window._zx.push({
"id" : "XXXXXXXXXXXXXX"
});
Now modify the code (added code marked in red):
window._zx.push({
"id" : "XXXXXXXXXXXXXX",
"settings" : {
}
});
The value of the new "settings" property is itself also a JavaScript object. To simulate the passing of a
new setting to your application, you have to add it to the "settings" object. For instance, if you want to
pass the setting "my_setting_1" with the value "myValue_1", do the following:
window._zx.push({
"settings" : {
"my_setting_1" : "myValue_1"
}
});
You can also pass a comma-separated list of settings.
window._zx.push({
"settings" : {
"my_setting_1" : "myValue_1",
"my_setting_2" : "myValue_2",
"my_setting_3" : "myValue_3"
}
});
Please keep in mind the following limitation: The above testing method will only work for settings
which have been previously defined by you in the zanox Application Store (see section Create an
application setting for your MasterTag).
If you now click refresh in your browser, the setting values are passed to the application’s callback
function as described above and your application should change its behaviour.
5
Release an application
5.1
Optimise the application source code
After you finished developing your application and you are sure it works like it should you can now
release it to the public. But before you do that, you should minimise the size of your application source
code by:

Minifying the JavaScript code

Removing all comments from the HTML, JavaScript and CSS code

Removing all other unused code
Minifying the JavaScript code is the most important step to optimise your source code. Minifying is
done by removing comments and whitespaces (spaces, tabs etc.) from the code and, depending on
the algorithm used, by compressing the source code afterwards.
There are some tools available which may help you minifying your source code, for example YUI or
Dojo Shrinksafe. If you prefer a simple website where you can paste your code, push a button and get
your minified code back, use for example:

http://jscompress.com/

http://dean.edwards.name/packer/

http://compressorrater.thruhere.net/
After optimising your applications source code, just update it in the zanox Application Store and you're
ready for the final step.
Application approval
5.2
The very last step to release your application to the public is to request approval by zanox. Only
approved applications are available to users and clients in the zanox Application Store.
To request approval proceed as follows:
Step 1:
Make sure that your application complies with the requirements set out in the MasterTag approval
checklist.
Step 2:
Go to your developer area in the zanox Application Store and click on the tab Applications for Sale.
Step 3:
Select the application you want to release from the list of your available applications and click on it.
Figure 12: Select your application for release
Step 4:
Scroll down to the bottom of the page and click the button Save & submit.
Figure 13: Save and submit your application


 A confirmation dialogue opens.
Figure 14: Confirm application submission
Step 5:
Click the button Submit to submit your application to the approval queue.
 The application is now reviewed and tested by zanox according to our code quality requirements.
Once zanox approves your application you will receive an e-mail and the application will be publicly
available in the zanox Application Store.
5.3
MasterTag approval checklist
Before sending a MasterTag application for approval, please make sure you have checked the
following:
1
Is there an application description?

2
Is the application type set to "widget"?

3
Is the application set to "Application for Advertisers"?

4
Have you provided a logo?

5
Are there search tags in the format "MasterTag, product, basket, checkout"?

6
Have all "document.write" commands in the JavaScript widget code been
eliminated?

7
Has the widget code been embedded once in a test page without causing any
JavaScript errors?

8
Does the widget code begin with the tag "<script 'type=text/javascript'>"?

9
Does the widget code command zanox.getCallback(APP_ID) use the
application's correct APP_ID?

10
Are the application settings formatted correctly according to the naming
conventions in section 2.2.2?

6
Tips for advanced users
6.1
Develop an application without generating a test code
6.1.1 Speed up application development
Most of the time, developing software is an iterative process. You change your source code and
immediately afterwards want to see how the software’s behaviour has changed. This implies that you
have to do the following steps over and over again:
1. Modify your applications source code
2. Open the zanox Application Store
3. Copy source code in the appropriate field in the developer area
4. Update
5. Open the browser
6. Refresh and check the new behaviour
One way to optimise the development process is to reduce the steps which are required to update
your application’s source code (steps 2, 3, 4). These steps are needed as your test page contains a
MasterTag test code that only works in conjunction with the zanox backend.
Wouldn't it be nice if you could just change your code and refresh your browser and skipt the update
steps in the zanox Application Store? To do so, you have to create a special HTML test page which
allows you to develop your application without the MasterTag test code. Instead, you do an integration
test after you have finished developing (see next section for a detailed explanation).
Advantages:

You only have to generate a code in the zanox Application Store once when you do an integration
test of your application.

You do not have to update the applications source code in the zanox Application Store every time
you want to check your source code behaviour. Instead, you just refresh the browser.

You can easily debug your application, for instance with Firefox. Debugging can get very
complicated if you use a MasterTag test code while developing.
6.1.2 Create an appropriate test page
Let’s assume, you have an empty HTML page like this:
<html>
<head>
</head>
<body>
</body>
</html>
To prepare this page for testing proceed as follows:
Step 1:
Place your application’s source code on the page. If your source code is located in an external
JavaScript file, use a <script src="...." /> tag. If want to copy your code into the test page,
use a normal <script> tag.
Step 2:
If your application uses some of the loader script functionality (e.g. the JavaScript function
zanox.load), include the loader script in your test page:
<script src="http://static.zanox.com/scripts.zanox.js"></script>
Step 3:
Include a HTML element in your test page which acts as a container for your application (see section
Reference of automatically transferred data). You can use the following sample code:
<div id="testcontainer"></div>
Step 4:
Add some JavaScript code that simulates parts of the internal functionality of the zanox loader script.
var data = {
"mediaslot" : {
"id" : "SOME_MASTERTAG_ID",
"height" : 0,
"width" : 0
},
"adspace" : {
"id" : 123
},
"app" : {
"id" : "MY_APP_ID",
"height": 0,
"width": 0,
"container" : {
"id" : "testcontainer"
},
"settings" : {
// add your settings here
},
"connectIds" : {
"developer" : "DEVELOPER_CONNECT_ID",
"publisher" : "PUBLISHER_CONNECT_ID"
},
"renderMode" : "inline"
}
};
var zanox = zanox || {};
zanox.setCallback = function( appId, callback ) {
callback(data);
}
The structure of the data object is exactly the same as described in section Reference of automatically
transferred data. There is only one difference: You are creating this object manually right now. That
means you have full control over what data is passed to your application.
The most important lines of code in the sample above are:
var zanox = zanox || {};
zanox.setCallback = function( appId, callback ) {
callback(data);
}
As mentioned above, you have to call the “zanox.setCallback” function at least once in our application
source code. The code above overwrites this function and immediately calls your application’s init
function (callback function) passing the data object you have created manually (Basically, it simulates
what the zanox loader script is doing internally). Hence, you do not need a MasterTag test code any
more when developing a MasterTag application.
ZANOX.de AG | Stralauer Allee 2 | 10245 Berlin | Deutschland
+49 30 509691-0 |
+49 30 509691-99 |
[email protected]
ZANOX.de AG | MASTERTAG DEVELOPER GUIDEwww.zanox.com
| LAST UPDATED
06/2012 | PAGE
37
| blog.zanox.com
| wiki.zanox.com

zanox MasterTag Developer Guide

Transcription

Similar documents

HOME DEVELOPMENT MUTUAL FUND Corporate - Pag

Stored Processes

LRTrek - ActFX Algorithmic Trading

Video Resizer - Sizmek Ad Feature

Game Post Mortems

the tribez - Game Insight

Committee Meeting Minutes 83th

METROVEST EQUITIES METROVEST EQUITIES

JavaScript Introduction

The Developer`s Cookbook

Able2Extract Mobile on iOS

Nardi Brochure Large 09-12-07

Programming on the Client Side: JavaScript/Dynamic HTML How

archived here - JavaScript: The Complete Reference

JavaScript 101 - Pace University

New Riders Publishing - Java Script Design