zanox MasterTag Developer Guide · 2014-03-18 · advertiser’s website checkout_totalAmount 2.2.3 Create an application setting for your MasterTag application To create a new application

MASTERTAG DEVELOPER

GUIDE

ZANOX.de AG | MASTERTAG DEVELOPER GUIDE | LAST UPDATED 06/2012 | PAGE 2

TABLE OF CONTENTS

1 Introduction ..................................................................................................................... 4

1.1 What is the zanox MasterTag? ............................................................................. 4

1.2 What is the zanox page type? .............................................................................. 4

2 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

3 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

4 Test an application ........................................................................................................ 25

4.1 Create an empty test page ................................................................................. 25

4.2 Simulate application settings in your test environment ....................................... 27

5 Release an application ................................................................................................. 29

5.1 Optimise the application source code ................................................................. 29

5.2 Application approval............................................................................................ 29

5.3 MasterTag approval checklist ............................................................................. 33


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:

http://apps.zanox.com/


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 Application setting that only


product page of the advertiser’s

website

product_productId

search Application setting that only


search results page of the

advertiser’s website

search_searchString

category Application setting that only


category page of the


category_categoryName

basket Application setting that only


basket page of the advertiser’s

website

basket_products

checkout Application setting that only


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

2.3 "Hello World" sample application

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:


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:


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:


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>



<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.

5.2 Application approval

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.

http://jscompress.com/

http://dean.edwards.name/packer/

http://compressorrater.thruhere.net/


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]

www.zanox.com | blog.zanox.com | wiki.zanox.com

http://www.zanox.com/

Documents

zanox MasterTag Developer Guide · 2014-03-18 · advertiser’s website checkout_totalAmount 2.2.3 Create an application setting for your MasterTag application To create a new application