CINXE.COM

<!DOCTYPE html> <html class="writer-html5" lang="en" > <head> <meta charset="utf-8" /><meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>EthicalAds Client — EthicalAds client 1.21.0 documentation</title> <link rel="stylesheet" href="_static/pygments.css" type="text/css" /> <link rel="stylesheet" href="_static/css/theme.css" type="text/css" /> <link rel="stylesheet" href="_static/docs.css" type="text/css" />  <script src="_static/jquery.js"></script> <script src="_static/_sphinx_javascript_frameworks_compat.js"></script> <script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script> <script src="_static/doctools.js"></script> <script src="_static/sphinx_highlight.js"></script> <script src="_static/js/theme.js"></script> <link rel="index" title="Index" href="genindex.html" /> <link rel="search" title="Search" href="search.html" /> <script async type="text/javascript" src="/_/static/javascript/readthedocs-addons.js"></script><meta name="readthedocs-project-slug" content="ethical-ad-client" /><meta name="readthedocs-version-slug" content="latest" /><meta name="readthedocs-resolver-filename" content="/" /><meta name="readthedocs-http-status" content="200" /></head> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div class="wy-side-nav-search" > <a href="#" class="icon icon-home"> EthicalAds client </a> <div class="version"> 1.21.0 </div> <div role="search"> <form id="rtd-search-form" class="wy-form" action="search.html" method="get"> <input type="text" name="q" placeholder="Search docs" aria-label="Search docs" /> <input type="hidden" name="check_keywords" value="yes" /> <input type="hidden" name="area" value="default" /> </form> </div> </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">  <div class="local-toc"><ul> <li><a class="reference internal" href="#">EthicalAds Client</a></li> <li><a class="reference internal" href="#usage">Usage</a><ul> <li><a class="reference internal" href="#ad-client-playground">Ad client playground</a></li> </ul> </li> <li><a class="reference internal" href="#configuration">Configuration</a></li> <li><a class="reference internal" href="#themes">Themes</a><ul> <li><a class="reference internal" href="#dark-mode">Dark mode</a></li> </ul> </li> <li><a class="reference internal" href="#ad-types">Ad Types</a><ul> <li><a class="reference internal" href="#image-placement">Image placement</a><ul> <li><a class="reference internal" href="#vertical-image">Vertical image</a></li> <li><a class="reference internal" href="#horizontal-image">Horizontal image</a></li> </ul> </li> <li><a class="reference internal" href="#text-placement">Text placement</a></li> </ul> </li> <li><a class="reference internal" href="#placement-style">Placement style</a><ul> <li><a class="reference internal" href="#stickybox">StickyBox</a></li> <li><a class="reference internal" href="#fixedfooter">FixedFooter</a></li> </ul> </li> <li><a class="reference internal" href="#ad-placement-reporting">Ad placement reporting</a></li> <li><a class="reference internal" href="#page-specific-keywords">Page-specific keywords</a></li> <li><a class="reference internal" href="#single-page-apps">Single-page apps</a></li> <li><a class="reference internal" href="#automatic-ad-rotation">Automatic ad rotation</a></li> <li><a class="reference internal" href="#customization">Customization</a></li> <li><a class="reference internal" href="#splitting-traffic-with-other-ad-networks">Splitting traffic with other ad networks</a></li> <li><a class="reference internal" href="#showing-content-when-there-isn-t-an-ad">Showing content when there isn’t an ad</a></li> <li><a class="reference internal" href="#manually-loading-ads">Manually loading ads</a></li> <li><a class="reference internal" href="#becoming-a-publisher">Becoming a Publisher</a></li> <li><a class="reference internal" href="#developing">Developing</a></li> </ul> </div> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="#">EthicalAds client</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="Page navigation"> <ul class="wy-breadcrumbs"> <li><a href="#" class="icon icon-home" aria-label="Home"></a></li> <li class="breadcrumb-item active">EthicalAds Client</li> <li class="wy-breadcrumbs-aside"> <a href="_sources/index.rst.txt" rel="nofollow"> View page source</a> </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <section id="ethicalads-client"> <h1>EthicalAds Client<a class="headerlink" href="#ethicalads-client" title="Permalink to this heading"></a></h1> <p>This is the client library used to add an ad placement from <a class="reference external" href="https://ethicalads.io">EthicalAds</a> to your site. To get started, you will need to first <a class="reference internal" href="#signup"><span class="std std-ref">become a publisher</span></a>, and then you can <a class="reference internal" href="#configuration"><span class="std std-ref">configure your site</span></a>.</p> <img alt="_images/example.png" class="align-center" src="_images/example.png" /> </section> <section id="usage"> <h1>Usage<a class="headerlink" href="#usage" title="Permalink to this heading"></a></h1> <p>There are two pieces required to add an ad placement to your site. You will need to create an empty <code class="docutils literal notranslate"><span class="pre"><div></span></code> element where you would like to place a new ad placement, and you will need to include the client library.</p> <p>To start, add the following in your site’s <code class="docutils literal notranslate"><span class="pre"><head></span></code>:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://media.ethicalads.io/media/client/ethicalads.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </pre></div> </div> <p>To add the placement on your site, you will need to add an empty <code class="docutils literal notranslate"><span class="pre"><div></span></code> with some added data attributes to configure the ad placement:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-type</span><span class="o">=</span><span class="s">"text"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <section id="ad-client-playground"> <h2>Ad client playground<a class="headerlink" href="#ad-client-playground" title="Permalink to this heading"></a></h2> <p>You can play around with an example placement in our <a class="reference external" href="https://jsbin.com/roniviv/edit?html,output">ethical ad client playground</a> on JSBin.</p> </section> </section> <section id="configuration"> <h1>Configuration<a class="headerlink" href="#configuration" title="Permalink to this heading"></a></h1> <p>The following data attributes are supported on the ad placement element:</p> <dl class="simple"> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-publisher</span></code></dt><dd><p><strong>(Required)</strong> The EthicalAds publisher id for your account.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-type</span></code></dt><dd><p>The ad placement type. This value can be either <code class="docutils literal notranslate"><span class="pre">image</span></code> or <code class="docutils literal notranslate"><span class="pre">text</span></code> – the default is <code class="docutils literal notranslate"><span class="pre">image</span></code>.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">id</span></code> (optional)</dt><dd><p>A placement identifier. If you define an <code class="docutils literal notranslate"><span class="pre">id</span></code> and <a class="reference internal" href="#placements"><span class="std std-ref">enable placements reporting</span></a>, this will allow you to see reports for each <code class="docutils literal notranslate"><span class="pre">id</span></code>.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-style</span></code> (optional)</dt><dd><p>Use a custom <a class="reference internal" href="#placement-styles"><span class="std std-ref">placement style</span></a>.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-keywords</span></code> (optional)</dt><dd><p>A pipe (<code class="docutils literal notranslate"><span class="pre">|</span></code>) separated array of keywords for this ad placement. This is page-specific (not publisher-specific) keywords related to where the ad is shown.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-campaign-types</span></code> (optional)</dt><dd><p>A pipe (<code class="docutils literal notranslate"><span class="pre">|</span></code>) separated array of campaign types (“paid”, “publisher-house”, “community”, “house”). This can only further reduce campaign types, not allow ones prohibited for the publisher. This is useful when you want certain users to not get certain types of ads.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-manual</span></code> (optional)</dt><dd><p>Set to <code class="docutils literal notranslate"><span class="pre">true</span></code> if you want to <a class="reference internal" href="#load-manually"><span class="std std-ref">manually load ads</span></a> at a specific future time for your app. This is useful if you want to conditionally load advertising for some users but not others or only load advertising when specific actions are performed.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-verbosity</span></code> (optional)</dt><dd><p>This can be set to “quiet”, “normal” (default), or “verbose”. The client will log more or less depending on this value. The value of “verbose” is useful when setting up the client initially and “normal” is a good value for most publishers.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-force-ad</span></code> (optional)</dt><dd><p>This parameter can be used to test the ad client on a specific ad. When used, any impressions will not be counted for billing purposes.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-force-campaign</span></code> (optional)</dt><dd><p>This parameter can be used to test the ad client on a specific campaign (group of ads). When used, any impressions will not be counted for billing purposes.</p> </dd> <dt><code class="docutils literal notranslate"><span class="pre">data-ea-placement-bottom</span></code> (optional)</dt><dd><p>Set to a valid value for the CSS bottom property (eg. ‘40px’) to have a custom position. This must be used with <code class="docutils literal notranslate"><span class="pre">data-ea-style</span></code> to have any effect.</p> </dd> </dl> </section> <section id="themes"> <h1>Themes<a class="headerlink" href="#themes" title="Permalink to this heading"></a></h1> <p>The following themes are available on all ad placement types:</p> <div class="row docutils container"> <div class="left docutils container"> <p><strong>Raised theme</strong></p> <p>This is the default theme used if you do not specify a theme.</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <p>Or you can also explicitly use the theme name:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"raised"</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> </div> <div class="right docutils container"> <div class="loaded raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> <div class="row docutils container"> <div class="left docutils container"> <p><strong>Flat theme</strong></p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"flat"</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> </div> <div class="right docutils container"> <div class="loaded flat" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> <div class="row docutils container"> <div class="left docutils container"> <p><strong>Bordered theme</strong></p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bordered"</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> </div> <div class="right docutils container"> <div class="loaded bordered" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> <section id="dark-mode"> <h2>Dark mode<a class="headerlink" href="#dark-mode" title="Permalink to this heading"></a></h2> <p>There are also dark variants for all of the themes. The dark variants can be used with the <code class="docutils literal notranslate"><span class="pre">dark</span></code> class:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dark raised"</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <div class="row dark docutils container"> <div class="column docutils container"> <div class="loaded dark raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> <div class="column docutils container"> <div class="loaded dark flat" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> <div class="column docutils container"> <div class="loaded dark bordered" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> <p>If your site varies based on the user’s color scheme (using <code class="docutils literal notranslate"><span class="pre">prefers-color-scheme</span></code>), set the <code class="docutils literal notranslate"><span class="pre">adaptive</span></code> class:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"adaptive raised"</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <div class="row adaptive docutils container"> <div class="column docutils container"> <div class="loaded adaptive raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> <div class="column docutils container"> <div class="loaded adaptive bordered" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> </section> </section> <section id="ad-types"> <h1>Ad Types<a class="headerlink" href="#ad-types" title="Permalink to this heading"></a></h1> <section id="image-placement"> <h2>Image placement<a class="headerlink" href="#image-placement" title="Permalink to this heading"></a></h2> <p>The image ad placement type has two variants: horizontal and veritcal. Vertical image placements are the default ad type. To use the horizontal variant, use</p> <section id="vertical-image"> <h3>Vertical image<a class="headerlink" href="#vertical-image" title="Permalink to this heading"></a></h3> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-type</span><span class="o">=</span><span class="s">"image"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <div class="row docutils container"> <div class="column docutils container"> <div class="loaded raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> <div class="dark column docutils container"> <div class="loaded dark raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> </section> <section id="horizontal-image"> <h3>Horizontal image<a class="headerlink" href="#horizontal-image" title="Permalink to this heading"></a></h3> <p>This variant can be used with the <code class="docutils literal notranslate"><span class="pre">horizontal</span></code> theme variant class:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"horizontal"</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-type</span><span class="o">=</span><span class="s">"image"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <div class="row docutils container"> <div class="column docutils container"> <div class="loaded horizontal raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> <div class="dark column docutils container"> <div class="loaded dark horizontal raised" data-ea-type="image"> <div class="ea-content"> <a href="#" rel="nofollow" target="_blank">  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMjQwIDE4MCI+CiAgPHJlY3QgZmlsbD0iI2RkZCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiLz4KICA8dGV4dCBmaWxsPSJyZ2JhKDAsMCwwLDAuNSkiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjMwIiBkeT0iMTAuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yNDDDlzE4MDwvdGV4dD4KPC9zdmc+" /> </a> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </div> </section> </section> <section id="text-placement"> <h2>Text placement<a class="headerlink" href="#text-placement" title="Permalink to this heading"></a></h2> <p>Text placements can be defined using <code class="docutils literal notranslate"><span class="pre">data-ea-type="text"</span></code>:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-type</span><span class="o">=</span><span class="s">"text"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <div class="loaded raised" data-ea-type="text"> <div class="ea-content"> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> <div class="row dark docutils container"> <div class="loaded dark raised" data-ea-type="text"> <div class="ea-content"> <div class="ea-text"> <a href="#" rel="nofollow" target="_blank"> <strong>EthicalAds</strong> is a developer-focused, privacy-obsessed ad network from the fine folks at Read the Docs </a> </div> </div> <div class="ea-callout"> <a href="https://ethicalads.io/">Ad by EthicalAds</a> </div> </div> </div> </section> </section> <section id="placement-style"> <span id="placement-styles"></span><h1>Placement style<a class="headerlink" href="#placement-style" title="Permalink to this heading"></a></h1> <p>Placement styles are helpers to help integrate our ads into your site. They are completely optional but they can help you get started with a common pattern without writing custom JavaScript or CSS.</p> <section id="stickybox"> <h2>StickyBox<a class="headerlink" href="#stickybox" title="Permalink to this heading"></a></h2> <div class="versionadded"> <p><span class="versionmodified added">New in version 1.4.</span></p> </div> <p>The “StickyBox” style is a floating placement in the lower right corner on very wide screens (>1300px wide) and a static placement on smaller screens. By floating, it ensures that the ad is always seen (and therefore results in billed views that make the publisher money). On mobile or smaller screens, the ad will just be a static placement wherever the ad <code class="docutils literal notranslate"><span class="pre"><div></span></code> is in the DOM.</p> <p>Using our StickyBox style:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-type</span><span class="o">=</span><span class="s">"image"</span> <span class="na">data-ea-style</span><span class="o">=</span><span class="s">"stickybox"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <video controls width="100%"> <source src="_static/stickybox.webm">  <p>This Stickybox placement as it transitions from ultrawide width where the placement floats to smaller widths where it is inline.</p> </video><p>This Stickybox placement as it transitions from ultrawide width where the placement floats to smaller widths where it is inline.</p> </section> <section id="fixedfooter"> <h2>FixedFooter<a class="headerlink" href="#fixedfooter" title="Permalink to this heading"></a></h2> <div class="versionadded"> <p><span class="versionmodified added">New in version 1.6.</span></p> </div> <p>The “FixedFooter” style is a floating, text-only placement attached to the bottom of the screen. By floating, it ensures that the ad is always seen (resulting in the highest view rate, generating the most revenue).</p> <p>Using our FixedFooter style:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cm"></span> <span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">data-ea-style</span><span class="o">=</span><span class="s">"fixedfooter"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <figure class="align-center" id="id1"> <a class="reference internal image-reference" href="_images/fixedfooter.png"><img alt="_images/fixedfooter.png" src="_images/fixedfooter.png" style="width: 100%;" /></a> <figcaption> <p><span class="caption-text">This FixedFooter placement on our homepage</span><a class="headerlink" href="#id1" title="Permalink to this image"></a></p> </figcaption> </figure> </section> </section> <section id="ad-placement-reporting"> <span id="placements"></span><h1>Ad placement reporting<a class="headerlink" href="#ad-placement-reporting" title="Permalink to this heading"></a></h1> <p>EthicalAds allows you to track all the different ad placements that you have on your site. This means that if you have an ad on your homepage template, blog listing template, and blog post template you can track them all seperately.</p> <p>This is enabled by adding an <code class="docutils literal notranslate"><span class="pre">id</span></code> to the EthicalAds <code class="docutils literal notranslate"><span class="pre">div</span></code> on your site:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">id</span><span class="o">=</span><span class="s">"blog-sidebar"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> <p>This feature is disabled by default, you can go to <span class="guilabel">Settings > Record placements</span> to enable this feature.</p> <div class="admonition tip"> <p class="admonition-title">Tip</p> <p>We recommend that you provide an <code class="docutils literal notranslate"><span class="pre">id</span></code> for each of your different ad placements. This will enable you to track the performance of each placement, and make adjustments that increase your <abbr title="click-through rate">CTR</abbr>.</p> </div> </section> <section id="page-specific-keywords"> <h1>Page-specific keywords<a class="headerlink" href="#page-specific-keywords" title="Permalink to this heading"></a></h1> <div class="admonition tip"> <p class="admonition-title">Tip</p> <p>EthicalAds uses a crawler (similar to a search engine) to crawl our publishers’ sites and figure out the appropriate keywords and topics for each page where ads appear. Most publishers won’t need to do anything for EthicalAds to appropriately target the right advertisers to the right pages on publisher sites. This API is mostly for SPAs or other non-traditional sites where our crawler won’t work.</p> <p>The user agent for our crawler is: <code class="docutils literal notranslate"><span class="pre">EthicalAds</span> <span class="pre">Analyzer/$version</span> <span class="pre"><server.ethicalads.io></span></code></p> </div> <p>EthicalAds allows our advertisers to target ads based on the content of pages. This provides value for everyone, giving users more relevent ads while still respecting their privacy.</p> <p>Publishers can set page-specific keywords dynamically on each page of their site based on the content of the pages. For example, if you have a blog post about Kubernetes, you could set tags of <cite>devops</cite> and <cite>kubernetes</cite>.</p> <p>This is enabled by adding an <code class="docutils literal notranslate"><span class="pre">data-ea-keywords</span></code> to the EthicalAds <code class="docutils literal notranslate"><span class="pre">div</span></code> on your site. They are <code class="docutils literal notranslate"><span class="pre">|</span></code>-seperated, so you can include multiple for a single page.</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-keywords</span><span class="o">=</span><span class="s">"devops|kubernetes"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> </div> </section> <section id="single-page-apps"> <h1>Single-page apps<a class="headerlink" href="#single-page-apps" title="Permalink to this heading"></a></h1> <p>Single-page applications (SPAs) rewrite rather than reload the current page to load new content. The goal is to seem more responsive to the site visitor. While ads should not change too frequently, for long lasting pages that transition based on user interaction, it may make sense to rotate the ad.</p> <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="nx">ethicalads</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span> </pre></div> </div> <p>Be careful that the ad placement (<code class="docutils literal notranslate"><span class="pre"><div</span> <span class="pre">data-ea-publisher="..."></span></code>) is not also removed by your screen transition or it will need to be recreated.</p> </section> <section id="automatic-ad-rotation"> <h1>Automatic ad rotation<a class="headerlink" href="#automatic-ad-rotation" title="Permalink to this heading"></a></h1> <div class="admonition note"> <p class="admonition-title">Note</p> <p>This feature is under active development and the conditions may change in future versions.</p> </div> <p>The ad client will automatically rotate an ad and show a new ad when appropriate. Currently, the conditions for ad rotation are:</p> <ul class="simple"> <li><p>The ad must be visible for 30 seconds or more.</p></li> <li><p>There must be a URL change (anchor link or using the <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">browser history API</a>) <strong>OR</strong> the tab must come back into focus after being backgrounded or minimized (a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event">visibilitychange</a> event)</p></li> </ul> </section> <section id="customization"> <h1>Customization<a class="headerlink" href="#customization" title="Permalink to this heading"></a></h1> <p>It’s possible to extend the ad client, even if you are loading the client in your browser through a request. After loading the script, there will be an <code class="docutils literal notranslate"><span class="pre">ethicalads</span></code> global/window instance that can be used to extend the ad client interface.</p> <p>The easiest place to extend is the <code class="docutils literal notranslate"><span class="pre">ethicalads.wait</span></code> promise instance. This resolves to an array of placements that were successfully configured – if no placements were loaded successfully, this will be an empty array.</p> <p>The <code class="docutils literal notranslate"><span class="pre">ethicalads</span></code> object needs to be instantiated first. If you aren’t loading the ad client library asynchronously, you can delay execution by loading your additional script after loading the ad client.</p> <p>If you are loading the ad client library asynchronously, you should wait for a document ready event. For example, using jQuery:</p> <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">ethicalads</span><span class="p">.</span><span class="nx">wait</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">placements</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Ads are loaded'</span><span class="p">);</span> <span class="w"> </span><span class="p">});</span> <span class="p">});</span> </pre></div> </div> </section> <section id="splitting-traffic-with-other-ad-networks"> <h1>Splitting traffic with other ad networks<a class="headerlink" href="#splitting-traffic-with-other-ad-networks" title="Permalink to this heading"></a></h1> <p>While our <a class="reference external" href="https://www.ethicalads.io/publisher-policy/">publisher policy</a> states that our ad should be the only ad visible when your page is loaded, you are free to split your traffic with other ad networks or fallback from EthicalAds to another network or vice versa.</p> <p>You can fallback to Carbon Ads with a snippet like this:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://media.ethicalads.io/media/client/ethicalads.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="nx">ethicalads</span><span class="p">.</span><span class="nx">wait</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">placements</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Fallback to Carbon Ads and put the ad in '#ad-container'</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">placements</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">placements</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">response</span><span class="p">.</span><span class="nx">campaign_type</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="s2">"paid"</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">script</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span> <span class="w"> </span><span class="nx">script</span><span class="p">.</span><span class="nx">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"//cdn.carbonads.com/carbon.js"</span><span class="p">;</span><span class="w"> </span><span class="c1">// Note: Don't forget your Carbon ID</span> <span class="w"> </span><span class="nx">script</span><span class="p">.</span><span class="nx">type</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"text/javascript"</span><span class="p">;</span> <span class="w"> </span><span class="nx">script</span><span class="p">.</span><span class="k">async</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span> <span class="w"> </span><span class="nx">script</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"_carbonads_js"</span><span class="p">;</span> <span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"ad-container"</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">});</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div> </div> </section> <section id="showing-content-when-there-isn-t-an-ad"> <h1>Showing content when there isn’t an ad<a class="headerlink" href="#showing-content-when-there-isn-t-an-ad" title="Permalink to this heading"></a></h1> <p>The easiest way to show alternative content when we do not have a paid ad is to use fallback ads. Fallback ads are ads you as a publisher can create to show only on your own site. You can create and manage fallback ads in your publisher dashboard.</p> <p>However, if you want to show something custom to users who do not get an ad, you can show backup content with a code snippet like this:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://media.ethicalads.io/media/client/ethicalads.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="nx">ethicalads</span><span class="p">.</span><span class="nx">wait</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">placements</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">placements</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// No ads were returned by the server</span> <span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="s1">'Loading backup content'</span><span class="p">);</span> <span class="w"> </span><span class="nx">div</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-ea-publisher]'</span><span class="p">)</span> <span class="w"> </span><span class="nx">div</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'<p>Check out our first-party ad content.</p>'</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="s1">'EthicalAds are loaded'</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">});</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div> </div> <div class="admonition warning"> <p class="admonition-title">Warning</p> <p>You need to have <code class="docutils literal notranslate"><span class="pre">Allow</span> <span class="pre">house</span> <span class="pre">campaigns</span></code> disabled in your publisher settings, otherwise we will always return a house ad. Go to <span class="guilabel">Settings > Control advertiser campaign types</span> to disable it. Alternatively, you may request <em>only</em> a paid ad or your own fallback ads by setting <code class="docutils literal notranslate"><span class="pre">data-ea-campaign-types="paid|publisher-house"</span></code>.</p> </div> </section> <section id="manually-loading-ads"> <span id="load-manually"></span><h1>Manually loading ads<a class="headerlink" href="#manually-loading-ads" title="Permalink to this heading"></a></h1> <p>You can precisely determine when an ad will be loaded by setting the <code class="docutils literal notranslate"><span class="pre">data-ea-manual</span></code> attribute to <code class="docutils literal notranslate"><span class="pre">true</span></code>. This is useful if you want to conditionally show advertising or only show advertising when specific actions occur.</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">data-ea-publisher</span><span class="o">=</span><span class="s">"..."</span> <span class="na">data-ea-manual</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">ethicalads</span><span class="p">.</span><span class="nx">load</span><span class="p">();</span> <span class="p">});</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div> </div> </section> <section id="becoming-a-publisher"> <span id="signup"></span><h1>Becoming a Publisher<a class="headerlink" href="#becoming-a-publisher" title="Permalink to this heading"></a></h1> <p>Visit <a class="reference external" href="https://ethicalads.io">EthicalAds</a> to apply to be a publisher.</p> </section> <section id="developing"> <h1>Developing<a class="headerlink" href="#developing" title="Permalink to this heading"></a></h1> <p>This section is for developers of the client itself. Development occurs on <a class="reference external" href="https://github.com/readthedocs/ethical-ad-client">GitHub</a>.</p> <ul class="simple"> <li><p><a class="reference external" href="https://github.com/readthedocs/ethical-ad-client/issues">Issues</a></p></li> <li><p><a class="reference external" href="https://github.com/readthedocs/ethical-ad-client/pulls">Pull requests</a></p></li> <li><p><a class="reference internal" href="releasing.html"><span class="doc">Releasing</span></a></p></li> <li><p><a class="reference internal" href="changelog.html"><span class="doc">Changelog</span></a></p></li> </ul> </section> </div> </div> <footer> <hr/> <div role="contentinfo"> <p>© Copyright Read the Docs, Inc.</p> </div> Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. </footer> </div> </div> </section> </div> <script> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>