Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Overview

WordPress is one of the most common used content management systems for many publishers. AdEngine integration works with WordPress as seamlessly as with any other web page, however there are some known issues, that can be avoided, due to use of plugins. Following those simple guidelines will help with smooth implementation.

AdEngine implementation

AdEngine implementation in WordPress should for best effect be done directly in page codes. In Header and body, it's allowed to use plugins, hovwever please notice possible issues listed below.

This integration guide applies if all ads are delivered by Snigel on a site with a simple page layout.

For this integration guide we assume the example of a website with the following two ads on every page:

  • "Top Leaderboard"

    • ad-unit-name: topleaderboard

    • div-name: adngin-topleaderboard-0

  • "Sidebar"

    • ad-unit-name: sidebar

    • div-name: adngin-sidebar-0

Header code

The head section modifications are the essential part of the integration. Without adding the AdEngine script and configuration to the head, the ads won't render.

To have an optimized and effective setup to bid on the site, a few code tags need to be implemented as outlined below.

If there are specific pages where only a subset of the ads are shown, it is important to declare the ad tags, that are used in the current page. If ad tags are not properly declared, ad units will be auctioned, even if not used. This will lead to false ad impressions, negatively affecting page performance and user experience.
You can declare ad units using the [snigelPubConf][snigelPubConf] element.

Please remember:

  • ad-unit-name: topleaderboard

  • div-name: adngin-topleaderboard-0

The following example assumes that a page has the Top Leaderboard and Sidebar. Create the following tags in the <head> element of the page:

<script data-cfasync="false" type="text/javascript">
  window.snigelPubConf = {
    "adengine": {
      "activeAdUnits": ["topleaderboard","sidebar"]
    }
  }
</script>
<script data-cfasync="false" async src="https://cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPY

Note:

  • Replace **site.domain** with the actual site domain

  • Place the script at the very top of the header to ensure best performance

  • If [Google Analytics][googleAnalytics] is used, place the AdEngine tag after the Google Analytics tag

  • Keep the correct order of the tags: first configuration and then loading of AdEngine

Body codes

The page body needs to define div elements which will be filled with ads. They need to be placed where the ad should be displayed.
The div elements should reserve the maximum width and height of the displayed ad to prevent [Cumulative Layout Shift][cls] (CLS). If you are using ad labeling, reserve additional 15px of height for the label. To reserve the proper space please consult your account manager to get the exact ad sizes.

For each div element name, provided by your account manager, create tags like in the example:

<div id="adngin-topleaderboard-0"></div>
<div id="adngin-sidebar-0"></div>COPY

Note:

  • If there are existing div elements that should be reused, provide the information to your account manager.

Keep in mind when implementing AdEngine in WordPress

  1. Ensure that both codes for PubConfig and loader.js have the elements:

    • data-cfasync="false"

    • async

  2. Do not place scripts from Snigel in minify and cache plugins, or if it can't be avoided place them in exclude from minify and cache section.

  3. Clear cache - both server and CDN to have a real overview if the implementation is corect and is not causing any issues. It's often when this step is missed an issue is visible only days or weeks after implementation.

Cache and Minify Plugins

While very useful, multiple WP plugins used for code optimization can create a lot of problems with ad stack performance and implementation.

  1. Minify plugins do a search on the page for all the content, then join all files - js and css - without order, or dependencies, and mix before displaying it on the page. After that, they inject all the code and then compress the page. It impacts how several elements of the page work, especially ad stack loader.

  2. Cache plugins - are caching old versions of scripts. When there is an fix or an update, a new version doens't load, and fixes don't work.

  3. The typical issues:

    • Ads stop appearing,

    • CMP starts being called multiple times,

    • Scripts stop working completely,

    • Impact on A/B test run with different partners,

    • Use of data-cfasync="true" to minify scripts by cloudflare RocketLoader

    • Changes don't show due to old versions of the scripts being cached.

  4. Some of the typical plugins causing these sorts of issues:

  • No labels