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.

Loading web native ads

  • The native ads library uses one file (pm-native.js, and pm-native-min.js in the minified version) to implement the native ads in your website. It is responsible for loading the ad configurations for your website, creating the needed elements, and inserting them on the page.

    Demo

    In addition to the code in this page, 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).

    Implementation

    In order to start displaying native ads on your website, you need to include the pm-native.js file in the head section of thepages you want to display native ads on. The script can be included using a regular script tag,together with the application token:

    <script type="text/javascript" src="https://s3.eu-central-1.amazonaws.com/pmnativeads/library/current/pm-native.min.js" data-application-id="123" async></script>

    The data-application-id attribute identifies your website, and can be retrieved from the user dashboard. It is the "token" column in your applications list.


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


    3.1 Loading the library

    The native ads library uses one file (pm-native.js, and pm-native-min.js in the minified version) to implement the native ads in your website. It is responsible for loading the ad configurations for your website, creating the needed elements, and inserting them on the page.

    In order to start displaying native ads on your website, you need to include the pm-native.js file in the head section of thepages you want to display native ads on. The script can be included using a regular script tag,together with the application token:

    <script type="text/javascript" src="https://s3.eu-central-1.amazonaws.com/pmnativeads/library/current/pm-native.min.js" data-application-id="123" async></script>

    The data-application-id attribute identifies your website, and can be retrieved from the user dashboard. It is the "token" column in your applications list.

    It is also available as a node package in npm (pocketmedia-native-ads-library).


    3.2a Config retrieved from the backend (ad builder setup)

    In case the configuration has been created with the AdBuilder tool - the ad configuration (including container, and markup) will be stored in our server. You only need to provide the right "data-application-id", and the library will retrieve the right config for the current page or screen (depending if it's a website or an app).


    3.2b Config provided with a custom configuration

    When the ads are created through the Chrome Extension, there's no need to specify where the configuration is located because the library will automatically retrieve it from the backend. But you can also create the ads manually, to get a 100% custom fit - contact us to get assistance.

    Specifying the location of the custom ad configuration is as easy as adding one line to override the ad configuration location as in:

    <script> ADLIB_OVERRIDES={"configFileLocation":"https://pmnativeads.s3.amazonaws.com/config/adconfig_sample.json"}</script>

    That should be done before the library is loaded (so the library takes that into account in the startup):

    <script> ADLIB_OVERRIDES={"configFileLocation":"https://pmnativeads.s3.amazonaws.com/config/adconfig_sample.json"}</script><script type="text/javascript" src="https://s3.eu-central-1.amazonaws.com/pmnativeads/library/current/pm-native.min.js" data-application-id="123" async></script>  


    3.2c Config created with the Javascript API

    You can also create the ads configurations programatically, via the Javascript API - or also via JSON files. This is the best fit for web applications or mobile websites, as you can completely customize the look and feel of the ads, and how they load, via code.

    You can check the configuration options in the library wiki, and also this sample JSON configuration (which could be used as a ADLIB_OVERRIDES.

Advanced usage: public API

  • The ad library exposes an API on the page’s window object after it is done loading. This API is exposed on the pocket_adlib variable and contains the following functions:

    Function name Parameters Description Example
    trigger adUnitNames -Array of string:Names of the adUnits that should be loaded Insert one ormore adUnitsthat are set to betriggeredmanually, byhaving thetrigger propertyset to true pocket_adlib.trigger([“newsAdUnit”]);Triggers the loading of the adUnit withname “newsAdUnit”
    refresh none Refreshes all theadUnits on thecurrent page pocket_adlib.refresh();
    removeAdUnits adUnitNames - Array of string:Names of theadUnits thatshould be removedfrom the page Removes all the adUnits with thename specified from the currentpage pocket_adlib.removeAdUnits([“news”]); Removes the ads with adUnit name“news” from the array.

Troubleshooting

  • In case the native ads library is not behaving as expected, for example when it is not showing ads on thecorrect 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.