Understanding Lytics / Integrations

Google Ad Manager (also known as DoubleClick for Publishers or DFP), allows you to generate revenue on your website by displaying ads inline with your site's content.

Using Lytics, you can pass the audiences an individual visitor is currently a member of to expand the level of targeting available for any Ad Manager Ad Unit. This may lead to more targeted impressions and higher CTRs.

Lytics identifies your visitor, even if they are anonymous and combines all known information about that particular visitor to improve ad targeting. Check out our How does Lytics work? docs for more detail on what is possible.

Technical Overview

The following overview is meant to cover the basics, from a technical JavaScript standpoint. If you are not a developer or are not interested in understanding in detail how the integration will work, please skip to Account Configuration below.

  1. In order to properly target ads we must ensure that Lytics has loaded the audiences the current visitor is a member of. As such, Lytics will temporarily disable the initial loading of ads using googletag.pubads().disableInitialLoad(). This ensures ads will not load before targeting has completed.
  2. A callback will be initialized using the Lytics JavaScript tag. This callback will be notified as soon as the visitors profile has been loaded. This will serve as the mechanism that completes the Ad Manager integration.
  3. When the callback is fired Lytics will pass the audiences into Ad Manager using the googletag.pubads().setTargeting() function and then complete the process by triggering a refresh using googletag.pubads().refresh(). This will result in the ads loading properly with the desired targeting criteria.

NOTE: Lytics targeting works for all Google Ad Manager tag types except passback tags.

Ad Manager Account Configuration

The first step in targeting Lytics audiences is to configure Ad Manager to recognize them. This is done by defining custom "key-values".

  1. Log in to Ad Manager.
  2. Navigate to Inventory in the menu at the left.
  3. Select Key-values in the sub-menu.
  4. Click New Key.
  5. For a Name, use LyticsSegments exactly as shown here (no extra characters, spaces, or different capitalization).
  6. For a Values type, select the Users will enter targeting values when creating line items or checking inventory option.
  7. Click Save at the bottom.

ad-manager-key-value

Site Setup & Targeting

Now that Ad Manager is configured to recognize Lytics audiences, configure your site to pass that Lytics audience information to Ad Manager using the custom "Key-values" for each visitor.

  1. Install the Lytics Tracking Tag as described here.
    • For best performance when working with Ad Manager, place the standard Lytics JavaScript tag above the tags that Google Ad Manager generates. Incorrect placement will not prevent the installation from working but may cause delays in displaying the proper ad(s) or undesired behavior.
  2. Install the additional Google Ad Manager integration tag as outlined below.

    • For best performance this tag should be located directly above the main Lytics JavaScript tag.

      <!-- lytics for google ad manager -->
      <script>
        !function(l,a){a.liosetup=a.liosetup||{},a.liosetup.callback=a.liosetup.callback||[],a.liosetup.addCallback=function(l){if("function"==typeof a.liosetup.callback){var o=[];o.push(a.liosetup.callback),a.liosetup.callback=o}a.lio&&a.lio.loaded?l(a.lio.data):a.liosetup.callback.push(l)}}(document,window);
        !function(o,g){g.googletag=g.googletag||{},g.googletag.cmd=g.googletag.cmd||[],"undefined"!=typeof g.googletag?g.googletag.cmd.push(function(){g.googletag.pubads().disableInitialLoad()}):console.warn("attempting to load Lytics for Google Ad Manager before initializing googletag"),g.liosetup.callback.push(function(o){o||o.segments?g.googletag.cmd.push(function(){g.googletag.pubads().setTargeting("LyticsSegments",o.segments),g.googletag.pubads().refresh()}):(console.warn("unable to load Lytics audiences for Google Ad Manager"),g.googletag.pubads().refresh())})}(document,window);
      </script>
  3. Complete the site setup by installing the Google Ad Manager generated tags per their instructions. Remember, for the optimal experience all additional Google generated code should come after the Lytics code above.

For reference, please find a full example of a working installation below:

<!DOCTYPE HTML>
<html lang="en-us">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Lytics Google Ad Manager Sample Page</title>

    <!-- lytics for google ad manager -->
    <script>
      !function(l,a){a.liosetup=a.liosetup||{},a.liosetup.callback=a.liosetup.callback||[],a.liosetup.addCallback=function(l){if("function"==typeof a.liosetup.callback){var o=[];o.push(a.liosetup.callback),a.liosetup.callback=o}a.lio&&a.lio.loaded?l(a.lio.data):a.liosetup.callback.push(l)}}(document,window);
      !function(o,g){g.googletag=g.googletag||{},g.googletag.cmd=g.googletag.cmd||[],"undefined"!=typeof g.googletag?g.googletag.cmd.push(function(){g.googletag.pubads().disableInitialLoad()}):console.warn("attempting to load Lytics for Google Ad Manager before initializing googletag"),g.liosetup.callback.push(function(o){o||o.segments?g.googletag.cmd.push(function(){g.googletag.pubads().setTargeting("LyticsSegments",o.segments),g.googletag.pubads().refresh()}):(console.warn("unable to load Lytics audiences for Google Ad Manager"),g.googletag.pubads().refresh())})}(document,window);
    </script>

    <!-- standard lytics javascript tag -->
    <script type="text/javascript">
      window.jstag=function(){function t(t){return function(){return t.apply(this,arguments),this}}function n(){var n=["ready"].concat(c.call(arguments));return t(function(){n.push(c.call(arguments)),this._q.push(n)})}var i={_q:[],_c:{},ts:(new Date).getTime(),ver:"2.0.0"},c=Array.prototype.slice;return i.init=function(t){return i._c=t,t.synchronous||i.loadtagmgr(t),this},i.loadtagmgr=function(t){var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=t.url+"/api/tag/"+t.cid+"/lio.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)},i.ready=n(),i.send=n("send"),i.mock=n("mock"),i.identify=n("identify"),i.pageView=n("pageView"),i.bind=t(function(t){i._q.push([t,c.call(arguments,1)])}),i.block=t(function(){i._c.blockload=!0}),i.unblock=t(function(){i._c.blockload=!1}),i}(),window.jstag.init({cid:"notarealacctid", url:"//c.lytics.io", min:true, loadid:false});
    </script>

    <!-- google ad manager generated code -->
    <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
    <script>
      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
    </script>

    <script>
      googletag.cmd.push(function() {
        googletag.defineSlot('/70652691/Demo_Right_Side_300x250', [300, 250], 'div-gpt-ad-1489772116528-0').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
      });
    </script>
  </head>
  <body>
      <h1>My Ad Should Render Below</h1>

      <!-- more ad manager generated code -->
      <!-- /70652691/Demo_Right_Side_300x250 -->
      <div id='div-gpt-ad-1489772116528-0' style='height:250px; width:300px;'>
        <script>
          googletag.cmd.push(function() { googletag.display('div-gpt-ad-1489772116528-0'); });
        </script>
      </div>
  </body>
</html>

NOTE: In many cases the above code snippets/examples will work out of the box. However, client side JavaScript can vary greatly and the Google Ad Manager's tag can be configured inconsistently. Due to this, it may be necessary to configure the integration using the advanced configuration section below. This commonly resolves flickering, ads not loading, ads loading twice or any other undesired behavior.

Advanced Configuration

The advanced configuration is intended to give your developer(s) access to visitors' profile and/or current audience membership via the Lytics JavaScript tag. This ensures your developer(s) retain complete control on how the Google Ad Manager integration is performed to ensure it is configured optimally based on your unique source code. Please see Technical Overview section above for a full understanding of how the Ad Manager integration should work at a base level.

  1. Ensure ads will not be initialized before the visitors profile has been retrieved.
  2. Configure Lytics Profile Callback
    The Lytics JavaScript tag makes adding a callback easy. Our full callback documentation walks you through the process of creating and managing callbacks. Said callback will be responsible for passing the visitors profile data, including audience membership, back to your desired JavaScript function. The following is an example of the callback used in the default Ad Manager integration. You will see it receives the data object, verifies that it has audiences and handles the result by either passing them to Google or logging a warning to the console.

    window.liosetup.addEntityLoadedCallback(function(data){
        if(data && data.segments){
            window.googletag.cmd.push(function() {
                window.googletag.pubads().setTargeting("LyticsSegments", data.segments);
                window.googletag.pubads().refresh();
            });
        }else{
            console.warn('unable to load Lytics audiences for Google Ad Manager')
            window.googletag.pubads().refresh();
        }
    });
  3. Push audience membership to Google Ad Manager
    As shown above, within the callback you will process the data object, full details on what is included can be found here, and ultimately passing a list of audience IDs to Ad Manager using their tags APIs.

    window.googletag.pubads().setTargeting("LyticsSegments", data.segments);
  4. Initialize Ads
    Lastly, once the audience IDs have been pushed, we leverage the googletag.pubads().refresh() call to show the proper ads. This refresh may be unnecessary in your application if you are ensuring the audiences have been pushed before the ads tag has been initialized in the first place.

    window.googletag.pubads().refresh();

Lytics Audience Configuration

Next, create your audiences in Lytics. These will be the audiences you will be connecting to "Line Items" withing Ad Manager in the final step.

  1. In Lytics, create an audience using the criteria with which you'd like to target.
  2. Ensure the "Enable API Access" box is checked, this is what allows it to be shared to your site.
  3. Write down the "ID" exactly as it appears to the right of the checkbox, you will need this inside of Google Ad Manager.
    • Be precise. Capitalization, symbols, and spacing will need to match exactly. For instance, if you generated an audience called "Cat-aholics", later, you won't be successful if you target Ad Manager at "cataholics", "cat-aholics", or "Cat- Aholics".

Finally, configure Ad Manager to map Lytics Audiences to Line items.

  1. Log in to Ad Manager.
  2. Navigate to Delivery in the menu at the left.
  3. Navigate to Line items in the sub-menu.
  4. Select a line item you'd like to target at your Lytics Audience.
  5. On the Settings tab of the line item you're editing, scroll to the bottom and in the Add Targeting section, select Key-values.
  6. Where it says Select a key, select "LyticsSegments".
  7. Choose the is operator.
  8. Enter the ID of the Lytics Audience you created. Again, precision is important, capitalization, symbols, and spacing need to match exactly.
  9. Click Save at the bottom.
  10. Verify that your selection has been properly saved by navigating away from the line item, then going back and checking that your key-value is there when you look.

ad-manager-cat-aholic

That's it! Your ads will be targeted to that audience as often as you've set up within Google DFP, which allows ads to be prioritized and rotated.