How-to: Clickable Ads

2016-11-08 15:28:39 UTC

Updated 06.01.2016

Clickable Ads are blinking clickable areas on top of the ads in the e-paper offering the user the possibility to go directly to the advertiser's website by tapping/clicking the ad. The ads can be made clickable in three ways:

  • Through XML
  • By inserting hyperlinks in InDesign
  • By inserting hyperlinks in Media Manager (Visiolink backend)

This guide will show you how to do it in these three ways. It is not necessary to resubmit your apps in order to implement clickable ads. Special circumstances might, however, make a resubmit necessary. Implementing clickable ads will work across all platforms (iOS, Android, Web).  

Please note: The URL must not contain special characters like # & æ ø å. URLs should be encoded or converted to shortened URLs by using free services like bitly.com 

Clickable Ads through XML

Along with delivery of XML files with article content, you can deliver a separate XML file to the usual FTP address. This XML file must contain information that will identify the clickable area uniquely. This means that for each ad you must provide: page number, section number or name, geometry of the ad and the URL to the landing page. If more information is needed in order to recognize the ad locations, please add this as well.  

Here is an example of XML structure for two ads:

<ad>
     <pagenumber>5</pagenumber>
     <newspaper>LP</newspaper>
     <sectionname>A</sectionname>
     <edition>1</edition>
     <url>http://www.lexab.net</url>
     <geometry bottom="384500.000000" right="133000.000000"       left="11000.000000" top="296500.000000"/>
</ad>

<ad>
     <pagenumber>8</pagenumber>
     <newspaper>LP</newspaper>
     <sectionname>A</sectionname>
     <edition>1</edition>
     <url>http://www.linkoping.se<url/>
     <geometry bottom="338500.000000" right="185000.000000" left="63000.000000" top="295500.000000"/>
</ad>

Delivering a separate XML file with clickable ad information is just one way to do it. You can also include the clickable ad information in the XML file containing articles. As a minimum, the ad information to uniquely identifying the ad placements must be recognizable from the delivered XML file. Please contact Visiolink at support@visiolink.com if you need more information.

Clickable Ads through XML are not displayed on the Flash client.   

Inserting hyperlinks through InDesign

When Visiolink processes your newspaper PDF pages and presents them in the app it is able to recognize links added from InDesign. Here is how to insert hyperlinks through InDesign. 

 

1. Mark an ad/element in InDesign and make a right click

2. Choose "Interactive" and "New Hyperlink..."

1.GIF

 

3. Insert the desired URL

Do this to all the ads you will like to make interactive

4. Export as a PDF and mark the check-box "Hyperlinks"

2.GIF

Now you can process the newspaper as usual.

 

Inserting hyperlinks through Media Manager

With your login to Visiolink's backend you can access the Media Manager. Here you can add a clickable area. Here is how to do it.

1. Pick the publication in which you would like to add clickable areas and press edit (pencil symbol)

2. Click the tab "Media Manager"

3. Click the hotspot tool and draw a box around the area you wish to make clickable

4. Click the '+' button 

5. Select "External link" under type of call

6. Write a tool tip (text to be shown at mouse over on web)

7. Insert a landing page. On apps the landing page will open in an in-app-browser (iOS) or the device browser (Android).

8. Press "Save" and add the desired number of clickable areas

9. When you are done and have saved, you can close the window

The clickable areas will appear on web and in the apps shortly. 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments