Topic Tracker

Enable users to follow their favorite topics and authors and receive timely notifications when relevant content is published.

Topic Tracker allows users to follow their favorite topics and authors and to receive timely notifications when relevant content is published. When embedded on a page, this interactive widget drives user retention and increases the time your users spend on your site.

711

Topic Tracker's subscription widget



Requirements


Notification Bell

The notification bell provides users a way to receive the on-site notifications about topics and authors they follow. This can be added to a page in one of the following ways:


Page-level metadata

This metadata is used to populate the interactive widget and trigger notifications. A minimum of 2 tags is required for Topic Tracker to appear on a page.

The following table lists the page-level metadata sources that are compatible with Topic Tracker:

Source Values
LD-JSON Article Schema Attributes:
•   author
•   keywords
•   datePublished
Open Graph Properties:
•   article:author
•   article:tag
•   article:published_time
Standard Metadata Name:
•   author
•   keywords

📘

If your pages are not uniquely tagged or you plan to execute a custom experience, you can set metadata at the launcher code or Topic Tracker embed code level.

  • Launcher code: To override the page-level topics, add the topics to the data-article-tags attribute of the launcher code.

  • Topic Tracker embed code: To override page-level and Launcher code-level topic and author metadata, add the data-keywords and data-authors attributes to the Topic Tracker embed code. These attributes apply only to the content displayed in Topic Tracker and will not be used to trigger notifications.


Monetization Campaign

Before you enable this feature, contact your OpenWeb PSM to set up a monetization campaign for your implementation and receive your site ID.



Implementation Options

OpenWeb provides you several approaches to add Topic Tracker to your site. Each is listed in the following table.

ApproachDescription
StandardDisplays Topic Tracker when a page loads where the launcher code is located
Custom LocationEnables choosing the location of the Topic Tracker on a page
AMPEnables adding the Topic Tracker to an AMP page

Standard

When using this implementation method, Topic Tracker appears where the launcher code is located. If Conversation is enabled, Topic Tracker appears horizontally above it.

To add Topic Tracker, use the following steps:

  1. In your OpenWeb Admin Panel, click Features > Topic Tracker.
  2. Under Enable/Disable Topic Tracker, click the toggle to Enabled. Additional Topic Tracker settings appear.
  3. From the Choose Topic Tracker Location dropdown menu, choose Above Conversation.
  4. Click Save & Publish.

Custom Location

When using this implementation method, you can choose the location in which Topic Tracker appears on a page.

To add Topic Tracker, use the following steps:

  1. In your OpenWeb Admin Panel, click Features > Topic Tracker.
  2. Under Enable/Disable Topic Tracker, click the toggle to Enabled.
  3. From the Choose Topic Tracker Location dropdown menu, choose Manual Code Integration (horizontal orientation) or In a Sidebar (vertical orientation).
  4. Under Code for Your Site, copy the embed code.

    💡

    You can override the default page-level SEO metadata by adding the following attributes to the embed code:

    • Topic: data-keywords="Topic1,Topic2,Topic3"
    • Author: data-authors="Author1,Author2"

    These attributes apply only to the content displayed in Topic Tracker and will not be used to trigger notifications for that article.

ApproachCode
Manual Code Integration <div data-spotim-module="topic-tracker" data-post-id="POST_ID" data-post-url="ARTICLE_URL"></div>
In a Sidebar*<div data-spotim-module="topic-tracker" data-post-id="POST_ID" data-post-url="ARTICLE_URL" data-vertical-view="true"></div>

* The Sidebar implementation of Topic Tracker requires a minimum width of 300px.


  1. Click Save & Publish.
  2. On your page, add the Topic Tracker embed code in the desired page location.
  3. When embedding Topic Tracker on a page without other OpenWeb products, add the launcher code.

AMP

When using this implementation method, you can choose the location in which Topic Tracker appears on a page.

To add Topic Tracker, use the following steps:

  1. In the <head> of your AMP page, add the following font and AMP Project scripts.
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"/>
<script 
    async="" 
    src="https://cdn.ampproject.org/v0.js">
</script>
<script 
    async="" 
    custom-template="amp-mustache" 
    src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<script 
    async="" 
    custom-element="amp-iframe" 
    src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

  1. Add the following code in the location where the Topic Tracker module should appear.
<div style="padding:8px">

  <!-- Topic Tracker -->
  <amp-iframe width="375" height="320" sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation" layout="responsive" frameborder="0" src="https://amp.spot.im/production.html?inactive=true&spot_im_highlight_immediate=true&spotId=SPOT_ID&postId=POST_ID&product=topic-tracker&data-post-url=POST_URL">
  </amp-iframe>

  <!-- Ad Unit Code -->
  <a data-spmark="ad-choice" href="https://dynamic-cdn.spot.im/yad/optout.html" target="_blank">
    <amp-img src="https://publisher-assets.spot.im/yad/ad-choises.png" width="9px" height="9px">
    </amp-img>
  </a>
  <amp-list width="auto" height="1" layout="fixed-height" items="items" style="text-align:center" src="https://api-2-0.spot.im/v1.0.0/owa-gw/spot/SPOT_ID/amp/topic_tracker">
    <template type="amp-mustache">
      {{#isDisplay}}
      <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-slot="{{ code }}" json='{"targeting":{"ampRCSpotId":["SPOT_ID"]}}' rtc-config='{"vendors":{"IndexExchange":{"SITE_ID":site_id}},"timeoutMillis":1000}'>
        <div placeholder="">
        </div>
        <div fallback="">
        </div>
      </amp-ad>
      {{/isDisplay}}{{#isAniviewVideo}}
      <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-playonview="1" data-pauseonunseen="1" data-publisherid="5e0e296628a061270b21ccab" data-channelid="{{code}}" data-ref1="AV_CDIM1=SPOT_ID&AV_SCHAIN=1.0,1!spotim.market,{{seller_id}},1,,," data-passbackurl="https://play.aniview.com/57b31584f83f1518108b4568/5e71193539e7c102b4435af3/spotimpassback.js">
      </amp-ad>
      {{/isAniviewVideo}}{{#isSRVideo}}
      <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-blade_player_type="{{type}}" data-blade_player_id="{{code}}" data-blade_api_key="587dfc37febaab0002000001" data-blade_macros="{"sub_id":"spotId=SPOT_ID&source=recirculation_amp"}">
      </amp-ad>
      {{/isSRVideo}}
    </template>
  </amp-list>
  <amp-layout layout="responsive" width="0" height="0">
  </amp-layout>

</div>
  1. Replace the SPOT_ID placeholder.
  2. Replace the POST_ID to set the unique article identifier that is specific to the article page.
  3. Replace the POST_URL to set the full URL address of the page in which the launcher code is embedded.
  4. Replace the SITE_ID with value with the value provided by your OpenWeb PSM.


Next Step

Add a notification bell to a prominent location so users can easily notice when a new relevant article was published