How do I install the widget on my WordPress site?

For most WordPress users, the WordPress plugin is the simplest way to install and configure Content.ad on your site.

Simply download and install the plugin on your WordPress site.  In the plugin settings, enter your WordPress key, which is provided in your Content.ad account information.  This will link your Content.ad account with your WordPress plugin.

To add a widget to your site, create one in Content.ad or through the plugin.  Then, click the “Placement” link under the widget and select where you want the widget to appear.  Click “Update” when finished.  Then, click “Activate” (next to “Placement”) to begin serving your widget on your site.

How do I install the widget on my Blogger?

For Blogger sites, you will need to manually install the widget onto your template for it to display beneath each post on the article pages.

  1. Go to the “Layout” page in your Blogger admin and remove all of Content.ad gadgets that might currently be installed on your layout.
  2. Go to the “Template” page and select the “Edit HTML button” to edit your site’s code.
  3. Paste your Content.ad widget’s installation code after the following code:
    <b:includable id=’comments’ var=’post’>

    If the code above doesn’t work, please try this one:
    <b:includable id=’comment_picker’ var=’post’>

  4. After you paste your widget’s installation code, be sure to click on the orange “Save Template” button and check if the widget appears on your site.

Given the variety of Blogger templates, these instructions may or may not apply to your template. If you run into any issues, please contact support for help.

How do I install the widget on my website?

(Note: If you’re using WordPress, you may prefer to install our plugin.  If you’re using Blogger, we provide more specific instructions for installation.)

Under “My Widgets,” find the widget you’d like to place on your site and click “Installation Code.”  Under “Universal (JavaScript),” your widget installation code is provided as a <script> tag.  Copy this code and paste in on your website where you’d like the widget to appear.

That’s it!  You can customize the appearance of your widget using the provided tools or by defining your own styles.  Content.ad also supports various configuration options to give you more control over how your widget is served.

What types of widgets can I create?

Content.ad provides several different widget types for you to choose from, all with their own unique styles:

  • Thumbnail & text links
    – Internal or sponsored content (or both)
    – Image with accompanying headline
    – Up to 16 links total
  • Text only
    – Internal or sponsored content (or both)
    – Headline only
    – Up to 16 links total
  • Banner ad
    – Sponsored content only
    – Image with accompanying headline
    – IAB sizes
  • Pop up
    – Internal or sponsored content (or both)
    – Image with accompanying headline
    – Displays when user is about to leave the page

In addition to choosing a widget type, you can customize the appearance of your widget using the provided options.

Mobile Slide-up

 

How can I customize the appearance of the widget?

When you create a widget, you have a number of options that allow you to control how it appears on your site.  Available options will vary based on the layout type and widget type you’ve chosen.  Don’t forget to click “Save” to apply your changes.

Responsive

  • Display Style
    You can select from one of our predefined style templates.  This allows you to choose a layout that suits your site and widget placement best.
  • Desktop / Tablet Layout
    The number and configuration of content links you’d like to appear in the widget will likely be determined by what looks best on your site.  The options available are based on what we find to perform the best on our network.  The 3×3 layout looks good and performs very well below the main content of a page, but the 2×4 is better suited for a sidebar placement.
  • Mobile Layout
    While we find that displaying the widget in a single column on smaller devices is often the best option, you can also choose a 2-column layout.

Fixed

  • Display Style
    You can select from one of our predefined style templates.  This allows you to choose a layout that suits your site and widget placement best.  You can click the “Preview” button at the bottom of the page at any time to see an approximated version of what your widget will look like.
  • Content Links
    The number of content links you’d like to appear in the widget will likely be determined by what looks best on your site.  For example, if four links fit horizontally in the space you’ve allotted on your site, you may want to choose either four or eight content links depending on whether you want one or two rows of links.
  • Image Size
    Like the number of content links, the image size you choose will likely depend on your site’s existing style.

Custom

  • Content Links
    The number of content links you’d like to appear in the widget will likely be determined by what looks best on your site.  For example, if four links fit horizontally in the space you’ve allotted on your site, you may want to choose either four or eight content links depending on whether you want one or two rows of links.
  • Image Size
    Like the number of content links, the image size you choose will likely depend on your site’s existing style.
  • CSS & JavaScript
    Learn how to create your own style template

All Layout Types

  • Header Text
    You can customize messaging text that appears above the links in the widget. Select one of the provided choices or enter your own. You can include the following macros to display the visitor’s location: [Country], [State], [City], [Postal_code].
  • Link Length
    You can select the maximum number of characters to be displayed in the content headlines.  All sponsored content headlines have a predefined maximum length to keep your widget looking clean.

 

 

How do I create a custom style for the widget?

Content.ad offers different widget display styles so that you can select the one that looks best on your page. However, users with a working knowledge of HTML and CSS (JavaScript optional) can define a custom style for the widget.  Simply select the “Custom” widget type on the Widget Setup page and write or paste in your CSS and JavaScript.

If you like one of our display styles but would like to add some flair of your own, simply click “copy CSS from template,” and choose a template use it as your starting point.

The “Text Only” and “Thumbnail Images” widget types are identical except that the <img> tags will not be delivered by the “Text Only” widget type. The HTML markup structure is provided below for your reference.

Text Only and Thumbnails

<div id="ac_[Widget ID]">
  <div class="ac_header_title">[Header text]</div>
  <div class="ac_adbox">
    <div class="ac_adbox_inner">
      <div class="ac_container">
        <a class="ac_image_link">
          <img height="..." width="..." src="..." alt="..." class="ac_image" title="...">
        </a>
        <div class="ac_title_wrapper">
          <a class="ac_title">
            [Title]
            <div class="ac_referrer">[Sponsor's Domain]</div> (only if sponsored)
          </a>
        </div>
      </div>
      ...
    </div>
    <div style="clear:both;"></div>
    <div style="ac_credit"><a href="http://content.ad/AboutUs.aspx" target="_blank">?</a></div>
    <div class="ac_modal_shading"></div>
    <div class="ac_credit_copy">
      <div class="ac_credit_logo"><img src="http://api.content.ad/Images/c_ad_logo.png"></div>
      These content links are provided by Content.ad. Both Content.ad and the web site upon which the links are displayed may receive compensation when readers click on these links.View our privacy policy <a href="http://content.ad/privacy.aspx" target="_blank">here</a>.<br><br>To learn how you can use Content.ad to drive visitors to your content or add this service to your site, please contact us at <a href="mailto:info@content.ad">info@content.ad</a>.
    </div>
  </div>
  <div style="clear:both;"></div>
</div>

What widget configuration options can I set?

Supported Meta Tags
The Content.ad widget detects the title, image and URL for each page of internal content, but they can also be explicitly defined by using meta tags. Content.ad recognizes the following tags:

Name Description
ca_title The title that should be used by the widget when displaying the page as a recommended article.
ca_image A full path to the image that should be used by the widget when displaying the page as a recommended article.
ca_url The URL that should be used when sending users to a piece of content. By default the system uses the first URL it encounters but this can be controlled through the use of this meta tag.


Supported Widget Call Parameters

Name Required Description Default Value
id Yes The unique identifier for your account (API Key). None
wid Yes The unique identifier for your widget. None
d Yes The unique identifier for your domain. None
serve No Whether or not to serve a particular page as recommended content. Set to 0 on pages which should not be served as related content – such as a home or category page. 1
lazyLoad No Whether or not the widget should load after the rest of the page has completely loaded. When set to 0, the widget may load faster but it could also affect the performance of other elements on your page. 0
pubdate No The date on which a page was published. This can be used to filter out old content that you don’t want to be served. Format: yyyy-mm-dd hh:mm:ss None
blockIntl No Whether or not the widget should return results for visitors outside of the US and Canada. When set to 1, the widget will not display for users outside of these countries. 0
blockMobile No Whether or not the widget should return results for visitors on mobile devices. When set to 1, the widget will not display for mobile users. 0
blockTablet No Whether or not the widget should return results for visitors on tablets. When set to 1, the widget will not display for tablet users. 0
loadMultiple No In the event that the same widget will be dynamically reloaded on the same page without a page refresh, this must be set to 1. Most implementations will not need to set this. 0
pre No Adds this value to the beginning of all links in the rendered widget. This is useful for adding macros when serving the widget through a third party ad service such as Google DFP. None
internalTarget No Sets the value of the “target” attribute on internal links (more info). _top
externalTarget No Sets the value of the “target” attribute on sponsored links (more info). _blank
exitPop No When set to true, the widget will only appear when the user is about to leave the page. Required for Exit Pop widgets. More info false
exitPopMobile No When set to true, the widget will only appear when the user scrolls up or reaches the bottom of the page. Required for Mobile Slider widgets. More info false
exitPopExpireDays No When widget is an exit pop, sets the frequency that the widget appears for each user. Accepts a decimal defining the number of days. When not set, the widget appears once per session. When set to 0, it appears on every pageview. None
clientId No Assigns a tracking parameter to any clicks generated from this impression. Accepts any string up to 64 characters. None
clientId2 No Assigns a tracking parameter to any clicks generated from this impression (separate from clientId). Accepts any string up to 64 characters. None

Please note: The parameters clientId and clientId2 should not be user-specific values.  More Info

Example

<div id="contentad01234"></div>
<script type="text/javascript">
  (function() {
    var params =
    {
      id: "821fb445-6e5e-47fd-9548-c91708f89a4a",
      d:  "dGVzdGluZzMyMS5jb20=",
      wid: "01234",
      clientId: "[your code to pull the utm_campaign value]",
      clientId2: "[your code to pull the page title]",
      cb: (new Date()).getTime()
    };

    var qs=[];
    for(var key in params) qs.push(key+'='+encodeURIComponent(params[key]));
    var s = d.createElement('script');s.type='text/javascript';s.async=true;
    var p = 'https:' == document.location.protocol ? 'https' : 'http';
    s.src = p + "://api.content.ad/Scripts/widget2.aspx?" + qs.join('&');
    d.getElementById("contentad01234").appendChild(s);
  })();
</script>

How can I load the widget from the document head or an external JavaScript file?

The JavaScript installation code is designed to function in as many different environments as possible. However, if the code simply won’t work for you for whatever reason, such as limited access to the page’s source code or a conflict with the document.write statement, the simple, non-blocking solution detailed below may work for you.

At the bottom of your page, paste the following code (or include it in an external JavaScript file), replacing the brackets with the values from your universal installation code:

<script type="text/javascript">
    (function(d) {
        var params =
        {
            id: "[Your ID value]",
            d:  "[Your D value]",
            wid: "[Your WID value]",
            cb: (new Date()).getTime()
        };

        var qs=[];
        for(var key in params) qs.push(key+'='+encodeURIComponent(params[key]));
        var s = d.createElement('script');s.type='text/javascript';s.async=true;
        var p = 'https:' == document.location.protocol ? 'https' : 'http';
        s.src = p + "://api.content.ad/Scripts/widget2.aspx?" + qs.join('&');
        d.getElementById("contentad[Your WID value]").appendChild(s);
    })();
</script>

In the body of the page, place the following code where you would like the widget to appear:

<div id="contentad[Your WID value]"></div><!-- Load Widget Here --></div>

If you are unable to add HTML to the page:

Skip the second step, and change the line document.getElementById("contentad[Your WID value]").appendChild(s); so that the value of getElementById is the ID of an element currently on the page inside of which you would like the widget to appear.

How can I pass variables through my campaign links for better reporting?

You can receive certain data through your campaign content links using preset macros.  Just put one of these macros in square brackets and place it into the tracking links section of a campaign or on the campaign content URL (ex. utm_source=[did]).

Name Description
did Domain ID. Identifies site from which this visitor originated.
cid Campaign ID. Identifies the campaign from which this content is served.
adid Ad ID. Identifies the specific content in a campaign that was clicked.
click_key Click Key. Identifies an individual click.

Is the widget responsive?

Yes.  We offer three options for styling your widget: Responsive, Fixed, and Custom.  Most publishers find that the responsive widgets generate the best performance. These widget styles are designed to fill the width they are placed into. If your site is responsive, the widget will adjust accordingly as the browser is resized.

NOTE: Please do not hide any of the widget’s content based on browser width or other factors. This will invalidate your reporting data and hurt the widget’s ability to optimize to the best performing content. If you wish to show a different number of ads on mobile, we suggest creating separate widgets for each device.

How can I view reports by URL, traffic source, or a custom dimension?

Content.ad allows publishers to segment reports based on their visitors’ utm_source and utm_campaign parameters with ease.  Alternatively, with a bit of custom code, you can specify your own custom values to track.  To get started, you will need to let us know values you would like grouped in your reporting dashboard.

You can specify up to 20 values for each dimension that will be grouped in your reporting dashboard.  In the “My Account” section in your Content.ad account, click on “Traffic Sources”. Enter the desired values.  For example, if you want to see reporting by traffic with the utm_source value of “FB”, enter “FB” under “Source”.

Source Campaign Tracking Setup
To see reporting by your dimension values in the dashboard:

  1. Choose “Widget Report” from the “Report” drop-down at the top right.
  2. Click on “Traffic Sources” in the Show results by section.

performance

Optionally, you can email your account rep or support@content.ad to receive a daily click report that will include all values that you pass. This is useful if you need to record more than 20 values in either dimension.  Please note that this report does not include impression data, so you may need to join to your own analytics.

Our guidelines prohibit passing user-identifying information through these parameters.  We recommend using general values; for example, pass the page title instead of the full URL or the device type (ex. “mobile”) instead of the full user agent.

Customizing your dimensions

If you want to track values other than your visitors’ utm_source or utm_campaign parameters, you can pass any desired value into the parameters “clientId” and/or “clientId2” in your widget installation code (more info).  In your reporting dashboard, clientId and clientId2 values will be reported as source and campaign, respectively.

<div id="contentad[your widget ID here]"></div>
<script type="text/javascript">
  (function(d) {
    var params =
    {
      id: "[your widget's unique ID here]",
      d:  "[your domain's unique ID here]",
      wid: "[your widget ID here]",
      clientId: "[your "source" value here]",
      clientId2: "[your "campaign" value here]",
      cb: (new Date()).getTime()
    };

    var qs=[];
    for(var key in params) qs.push(key+'='+encodeURIComponent(params[key]));
    var s = d.createElement('script');s.type='text/javascript';s.async=true;
    var p = 'https:' == document.location.protocol ? 'https' : 'http';
    s.src = p + "://api.content.ad/Scripts/widget2.aspx?" + qs.join('&');
    d.getElementById("contentad[your widget ID here]").appendChild(s);
  })(document);
</script>

Displaying different widgets to different traffic sources

You may wish to show content with a different rating to visitors from different sources of traffic or track certain sources separately in reports. You can do this by setting up different widgets for each desired source and using a simple JavaScript conditional statement to switch between widgets with the desired settings.

  1. In addition to the default widget, create and configure an additional widget for each traffic source that requires separate settings or tracking.
  2. Ensure that visitors from the desired traffic sources are using URLs with a parameter unique to that source.
    http://example.com?utm_source=adsinc
  3. Add JavaScript to your page that swaps the widget ID and unique ID in the needed places based on the unique parameter.  In the example below, a specific widget is displayed for traffic from “adsinc”, while the default widget is used for all other traffic:
    <div id="contentad[Default widget WID value]"><!-- Load Widget Here --></div>
    <div id="contentad[Adsinc widget WID value]"><!-- Load Widget Here --></div>
    <script type="text/javascript">
        (function(d) {
            /* Add function for parsing URL parameters */
            function getURLParameter(name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
            }
    
            /* Get the value of utm_source from the URL */
            var trafficSource = getURLParameter('utm_source');
    
            /* If utm_source isn't set, try to get it from web storage */
            if (!(trafficSource)) {
                if (sessionStorage.trafficSource) {
                    trafficSource = sessionStorage.trafficSource;
                }
            }
    
            /* Save the source in web storage */
            sessionStorage.trafficSource = trafficSource;
    
            /* Define the default widget */
            var cad_id = "[Default widget unique ID value]";
            var cad_wid = "[Default widget WID value]";
            var cad_did = "[Your D value]";
    
            /* If utm_source is adsinc, swap widget */
            if (trafficSource == "adsinc") {
                var cad_id = "[Adsinc widget unique ID value]";
                var cad_wid = "[Adsinc widget WID value]";
            }
    
            /* Add the parameters to the widget installation code so that the correct widget is displayed*/
            var params =
            {
                id: cad_id,
                d: cad_did,
                wid: cad_wid,
                cb: (new Date()).getTime()
            };
    
            var qs=[];
            for(var key in params) qs.push(key+'='+encodeURIComponent(params[key]));
            var s = d.createElement('script');s.type='text/javascript';s.async=true;
            var p = 'https:' == document.location.protocol ? 'https' : 'http';
            s.src = p + "://api.content.ad/Scripts/widget2.aspx?" + qs.join('&');
            d.getElementById("contentad" + cad_wid).appendChild(s);
        })(document);
    </script>
    

You may use an ad server to control the swapping logic instead.  You can write server-side code to perform this action as well, but this may not work as needed when page caching is enabled.