Swelen Labs

Swelen WebApp SDK

The Swelen Mobile Manager SDK for WebApp is provided as a JavaScript Tag to be inserted into your website.

This library is currently working with:
- classic desktop websites
- websites specially designed for mobile devices (aka Mobile Websites)
- applications specially designed to run in native browsers (aka WebApps or Web Applications)

Supported products:
- Swelen product suite (Swelen Magnet and Swelen Mobile Manager)
- NetAffiliation MarketPlace product suite.

 

Integration Overview

Swelen Ad Script Tag is some JavaScript code used to ensure the consistency of Swelen Magnet or Swelen Mobile Manager. The presence of this tag is essential for the proper displaying of ads on your website.

<html>
   <head>
   <title>Title of your page</title>

<!-- Swelen Ads -->
<script type="text/javascript" src="http://cdn.swelen.com/showAds.js"></script> <script type="text/javascript">
_$welen.showAds.init({test:false});
_$welen.showAds.getFixedSlot({
     slotUID : 'fixed-320x50-test',
     targetID : 'banner'
});
</script>
<!-- Swelen Ads -->

   </head>
   <body>
         ...

         <div id="banner" class="swelenFixedBanner"></div>

         ...
         ... .. ....
   </body>
</html>

Copy the Swelen Ad Script Tag in the head section of the page where you want ads ...

Place the script just before the ending </head> tag.

Place div tags in your website content where you want fixed ads that fit into your layout.

Non-blocking Mode Integration:
Instead of making the insertion in the <head> section, you can place the Swelen Ad Script Tag at the end of your page, just before the closing </body> tag. When using this integration mode, ad requests at Swelen's servers will only occur when your page is loaded, so Swelen Ad Script Tag can not slow down performance or load times of your site. Non-blocking Mode Integration may result in faster loading times for your site but may have an impact on the loading times of your Swelen Ads (slower).

What does Swelen do with my information?

Swelen gives great importance to the protection and confidentiality of your information. The data and information gathered on your website are anonymously exclusively used for statistical purposes. No personal details is recorded on users.

Who can see my information?

The data and information gathered from your website are encrypted and used only by Swelen's bots to display ads on your website. Your statistical reports are in no case provided to any third party or Swelen's staff.

 

Ad Invocation for Overlay ads

Overlay Ads are displayed on top of your website.
To display these banners, you need to create an overlay slot on Swelen Magnet and get the SlotUID.
Overlay slots in mobile websites and webapps can display SplashScreen and HTML5 Interstitial.
You do not have to specify a placement in your website or webapp to invoke Overlay Ads.

Overlay Ads must be invoked with the showAds.get() method, like this:

<script type="text/javascript">
	_$welen.showAds.init({test:false});
	_$welen.showAds.get('___REPLACE_WITH_AN_OVERLAY_SLOT_UID___');
</script>	

Important Notes:
- To test an Overlay Ad, use the following SLOT_UID: orientablesplashscreen-320x460-test
- You can not invoke more than one Overlay Ad per page (the method showAds.get() can only be invoked one time per page).

 

Ad Invocation: Sliding and animated mobile banner ads

Animated Banners Ads are displayed at the bottom of your website.
To display these banners, you need to create a fixed slot on Swelen Magnet.
You can not define more than one Animated Banner Ad per page.

Animated and sliding banner ads must be invoked like Overlay Ads, with the showAds.get() method:

<script type="text/javascript">
    _$welen.showAds.init({test:false});
	_$welen.showAds.getFixedOverlaySlot('___REPLACE_WITH_A_FIXED_SLOT_UID___');
</script>	

Important Notes:
- To test Animated Banner Ads, use the following SLOT_UID: fixed-320x50-test
- You can not invoke more than one Animated Banner Ad at a time (the method showAds.getFixedOverlaySlot() will only show one ads at a time).
- Video Expand and Loodies ad formats such as Travel or Bounce are not supported in this build.

 

Ad Invocation for fixed banners

Example: Displaying a fixed 320x50 ad in your website

To display fixed banner ads, you need to define slot placements on your site where you want ads to appear.
To define a slot placement, you can use a DIV tag with an unique ID, like this:

<div id="myCoolBanner" class="swelenFixedBanner"></div>

The instanciation of a Fixed Ad need to be done with the showAds.getFixedSlot() method, like this:

<script type="text/javascript">
	_$welen.showAds.init({test:false});
	_$welen.showAds.getFixedSlot({
		slotUID : '___REPLACE_WITH_A_FIXED_SLOT_UID___',
		targetID : 'myCoolBanner'
	});
</script>

Important Notes:
- To test a Fixed Banner Ad, use this SLOT_UID: fixed-320x50-test
- Your banner will automatically scale to fit the available screen's width
- When Swelen does not have ad to display, your banner will stay hidden.
- You can avoid this behavior by removing the class swelenFixedBanner in the DIV

As soon as your integration is working fine, you will be able to see test ads on your site.
You must not put your site in production with test UIDs. Ask your agency to get SLOT_UIDs that are ready for production.

 

Complete Example: 1 splashscreen + 3 fixed banners

The following example demonstrates how to instanciate 1 Overlay Ad (SplashScreen) + 3 Fixed Banner Ads (320x50 ads).
This code will only display ads when your website is visited on mobile devices.
Click here to see how to display ads on desktop computer websites as well.

<html>
<head> <title>Your WebSite</title> <script type="text/javascript" src="http://cdn.swelen.com/showAds.js"></script>
<script type="text/javascript">
_$welen.showAds.init({test:false});
_$welen.showAds.get('orientablesplashscreen-320x460-test'); _$welen.showAds.getFixedSlot({ slotUID : 'fixed-320x50-test', targetID : 'banner1' }); _$welen.showAds.getFixedSlot({ slotUID : 'fixed-320x50-test', targetID : 'banner2' }); _$welen.showAds.getFixedSlot({ slotUID : 'fixed-320x50-test', targetID : 'banner3' });
</script>
</head>
<body> <p>In your website, put the DIVs where you want ads.</p>
<div id="banner1" class="swelenFixedBanner"></div> <div id="banner2" class="swelenFixedBanner"></div> <div id="banner3" class="swelenFixedBanner"></div> </body> </html>

 

Events

Swelen WebMobile SDK emit various events. Available events are :

You can listen for events using the following code :

<script type="text/javascript">
    _$welen.showAds.init({test:false});
    var ad = _$welen.showAds.get('___REPLACE_WITH_AN_OVERLAY_SLOT_UID___');
    ad.on('error', function() {
        alert('No ad found');
    });
    ad.on('ready', function() {
        alert('Ad loaded');
    });
    ad.on('close', function() {
        alert('Interstitial Ad closed');
    });
    ad.on('click', function() {
        alert('Ad clicked');
    });
</script>	

Advanced Features

The showAds.init() method can accept optional parameters :

Ex1: Displaying Swelen Ads only on mobile devices (default behavior):

_$welen.showAds.init({test : false});

Ex2: Displaying Swelen Ads only when your site is visited from a desktop computer:

_$welen.showAds.init({
	desktop : true,
	mobile : false
});

Ex3: Displaying Swelen Ads on both mobile and desktop devices:

_$welen.showAds.init({
	desktop : true,
	mobile : true
});

Ex4: Providing Latitude & Longitude :

_$welen.showAds.init({
    lat: 48.895256,
    lng: 2.273822
});

Objectives Tracking

Swelen Objectives Script Tag is a JavaScript code used to ensure the tracking of your objectives. The presence of this tag is essential for the proper tracking of objectives on your website.

  1. Insert Swelen objective script http://cdn.swelen.com/swObjective.js
  2. Call _$welen.objective.register

The register() method expect at least one or both of the following options:

Important Notes for objectives tracking :
To works as expected, _$welen.objective.register either needs a tracking ID(display UID) and/or an objective UID. If you fail to pass one at least of them the objective WILL NOT work.

It is recommanded to ALWAYS pass a tracking ID for accurate results.

Example specifying a tracking ID and objective UID

<script src="http://cdn.swelen.com/swObjective.js"></script>
<script type="text/javascript">
    _$welen.objective.register({
        uid : "__REPLACE_THIS_WITH_YOUR_OBJECTIVE_UID__"
        parameter: "tid", // Specifiy that the GET parameter tid is contaning the tracking ID
    });
</script>

Example with timeout and currency options

Swelen Objectives Tracking also support three additional options

The following example will trigger the objective after 5 seconds with an amount and a currency

Example

<script src="http://cdn.swelen.com/swObjective.js"></script>
<script type="text/javascript">
    _$welen.objective.register({
        uid : "__REPLACE_THIS_WITH_YOUR_OBJECTIVE_UID__",
        parameter: "tid",
        amount: 4.25,
        currency: "USD",
        timeout: 5000
    });
</script>

Saving display_uid for later use

If your objective needs to be registered later (for example after a user have filled a form), you can use _$welen.objective.saveDisplayUID to save the tracking id for later use.

Example

<script src="http://cdn.swelen.com/swObjective.js"></script>
<script type="text/javascript">
    _$welen.objective.saveDisplayUID({
        parameter: "tid"
    });
</script>
Then, later, on another page, you can call _$welen.objective.register that will automatically retreive the previously saved tracking ID