This is the help page for the integration with the Javascript library to display web native ads in your site. Remember that you will need to have an affiliate ID in order to track your links, but you can testdrive the library without it.

SIGN UP

For any doubts, questions, or asistance, contact us.

1. About the web native ads

  • Native web ads get integrated within the content of your website, to appear as elements of your site. It should be clear for the users that what they're seeing is an ad - but with a nice integration in the form and funcionality of your site.

    In order to provide the functionality of native advertising for web ads, we offer you the Native Ads Web Ad Library - as well as many ways to create and display the ads.


    The web ads consist of two main elements: the markup of it (the HTML with some plaholders to be replaced with the actual content), and the configuration of it (including the XPath expression for the parent element and the settings about how many times they should be disaplayed). This configuration can be created in two ways:

    • with our ad builder (easiest, more limited): this extension for Google Chrome will assist you in the creation of the configuration, and allow you to load the ads in your website withuot having to code the ad. The Google Chrome extension will assist you in the process of selecting the placement for the ad, and creating its markup replicating the one in your website.
    • manually (advanced): using a JSON configuration file (you can check its definition in this PDF document), you have the posibility of telling exactly where and how you want to display your ads, totally controlling its markup and position.

    In order to load the ads, the first step will be loading the library (the actual javascript file) in your document.


    Examples

    In order to show the code required to integrate the ads in a web project, we have published two project demosntrations: we have published a demo in Github. In this project you can find an Ad Builder example, and another one with custom configuration

    • Javascript demo: showing how to integrate ads with the ad builder, and with custom Javascript.
    • Node package (npm) demo: showing how to integrate the ads in a backend javascript project (using node).

2. (optional )Using the ad builder: ad creation

  • Your ads configuration can be easily created though the User Dashboard, with the Ad Builder extension for Google Chrome. Before starting the process, you need to install the Google Chrome extension. Note: For more advanced usages, or a more extensive customization, you'll better be using the custom code procedure.

    After installing the extension, you willhave to create an Ad Placement for your web project, by logging in in your web panel:

    Clicking in the button under the "placements" column, you can access the list of placements for that website. From this screen you can edit or create the configurations for the placements for the website:

    For more information about the process of using the Ad Builder Chrome Extension, check its help page.

    Check implementation details (ad builder)

3. Loading web native ads

  • Displaying the ads consists of two steps:

    • loading the library
    • loading the ads configuration

    After that, the library will use the configuration to display the ads, as defined. Depending on how the configuration has been created, it will be more automatic (with the ad builder) or manual (with the API or custom configuration) - allowing also more or less control over the process of displaying the ads.

    Check implementation details (custom code)

    4. Troubleshooting

    • In case the native ads library is not behaving as expected, for example when it is not showing ads on the correct pages, you can use the browsers’ console for troubleshooting your problem.

      In most cases, fatal errors that cause the native ads library to not insert ads in the page will be directlylogged to the browsers’ console window, which can be viewed in Google Chrome by opening thedeveloper console (ctrl+alt+i) and pressing the escape key.

      Should no error logs be visible here, you can request the logs from the native ads library by pasting thefollowing line in the browser console:

      __adlibLog.print()

      This command will output all the log entries from the native ads library. These log entries can giveinsight into why your ads are not displaying on the page.

      Doubts? Contact us