Topic Tracker

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 on-site notifications about topics and authors they follow. This can be added to a page in one of the following ways:

Implementing a prominent Notification Bell
Using the bell menu embedded at the top of the Conversation widget

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 in priority order:

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`

📘
To override page-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.

Approach	Description
Standard	Displays Topic Tracker when a page loads where the launcher code is located
Custom Location	Enables choosing the location of the Topic Tracker on a page
AMP	Enables 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:

In your OpenWeb Admin Panel, click Features > Topic Tracker.
Under Enable/Disable Topic Tracker, click the toggle to Enabled. Additional Topic Tracker settings appear.
From the Choose Topic Tracker Location dropdown menu, choose Above Conversation.
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:

In your OpenWeb Admin Panel, click Features > Topic Tracker.
Under Enable/Disable Topic Tracker, click the toggle to Enabled.
From the Choose Topic Tracker Location dropdown menu, choose Manual Code Integration (horizontal orientation) or In a Sidebar (vertical orientation).
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.

Approach	Code
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.}

Click Save & Publish.
On your page, add the Topic Tracker embed code in the desired page location.
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:

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>

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>

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