Authors Targets & Tags Installation

To capture the author, category, and tags of the clicked article, it's essential to identify these elements on the Home Page by implementing the appropriate data-attributes.


Prerequisites

Confirm that you have completed the installation of the Publisher Analytics Plugin.

Installation

Data-attributes:

  • data-npaw-article
  • data-npaw-article-author
  • data-npaw-article-category
  • data-npaw-article-tag

These data-attributes should be added to the elements within the article that already have the data-npaw-article data-attribute.

If any of the required data-attributes are absent, the corresponding information will not be captured.

Below are examples demonstrating articles with all their elements correctly identified using the appropriate data-attributes:

Example 1: Data-attributes on the <article> element

<html>
  <head>
    <title>Here is the title of the page</title>
    <!-- Publisher Analytics -->
    <script src="https://publisheranalytics.ai/publisher-sdk"></script>
    <script>
      const accountCode = "demoAccountCode"; // CHANGE HERE
      const flickerControl = false; // CHANGE HERE IF YOU WANT
      new PublisherAnalyticsSDK(accountCode, flickerControl);
    </script>
    <!-- /Publisher Analytics -->
  </head>
  <body>
    <div>
      <!-- ARTICLE WITH DATA-ATTRIBUTES ON THE ARTICLE ELEMENT -->
      <article
        data-npaw-article
        data-npaw-article-author="Dr. Jane Smith"
        data-npaw-article-category="Science"
        data-npaw-article-tag="Renewable Energy"
      >
        <a
          data-npaw-article-url
          href="https://breaknews/breakthrough-discovery"
        >
          <img
            data-npaw-article-image
            src="https://breaknews/assets/image01"
            alt="alt text for image"
          />
        </a>
        <a
          data-npaw-article-url
          href="https://breaknews/breakthrough-discovery"
        >
          <h2 data-npaw-article-title>
            Breakthrough Discovery: Scientists Unveil New Renewable Energy
            Source
          </h2>
          <p data-npaw-article-description>
            Researchers have announced a groundbreaking discovery of a novel
            renewable energy source, promising to revolutionize the way we power
            our world and significantly reduce our reliance on fossil fuels.
          </p>
        </a>
      </article>
    </div>
  </body>
</html>

Example 2: Getting value from attribute value

<html>
  <head>
    <title>Here is the title of the page</title>
    <!-- Publisher Analytics -->
    <script src="https://publisheranalytics.ai/publisher-sdk"></script>
    <script>
      const accountCode = "demoAccountCode"; // CHANGE HERE
      const flickerControl = false; // CHANGE HERE IF YOU WANT
      new PublisherAnalyticsSDK(accountCode, flickerControl);
    </script>
    <!-- /Publisher Analytics -->
  </head>
  <body>
    <!-- BASIC ARTICLE SAMPLE -->
    <article data-npaw-article>
      <a data-npaw-article-url href="https://breaknews/exploring-the-depths">
        <h2 data-npaw-article-title>
          Exploring the Depths: Unraveling the Mysteries of the Ocean's Twilight
          Zone
        </h2>
      </a>
      <div>
        <span data-npaw-article-author="Dr. Jane Smith"
          >Dr. Jane Smith for the newspaper</span
        >
        <span data-npaw-article-category="Science">Science</span>
        <span data-npaw-article-tag="Renewable Energy">Renewable Energy</span>
      </div>
    </article>
  </body>
</html>

Example 3: Getting value from inner text

<html>
  <head>
    <title>Here is the title of the page</title>
    <!-- Publisher Analytics -->
    <script src="https://publisheranalytics.ai/publisher-sdk"></script>
    <script>
      const accountCode = "demoAccountCode"; // CHANGE HERE
      const flickerControl = false; // CHANGE HERE IF YOU WANT
      new PublisherAnalyticsSDK(accountCode, flickerControl);
    </script>
    <!-- /Publisher Analytics -->
  </head>
  <body>
    <div>
      <!-- BASIC ARTICLE SAMPLE -->
      <article data-npaw-article>
        <a data-npaw-article-url href="https://breaknews/exploring-the-depths">
          <h2 data-npaw-article-title>
            Exploring the Depths: Unraveling the Mysteries of the Ocean's
            Twilight Zone
          </h2>
        </a>
        <div>
          <span data-npaw-article-author>Dr. John Doe</span>
          <span data-npaw-article-category>Environment</span>
          <span data-npaw-article-tag>Oceanography</span>
        </div>
      </article>
    </div>
  </body>
</html>

Important Details!

  1. The procedure for identifying authors, categories, and tags should be performed on the home page HTML.
  2. Ensure that the data-npaw-article-author, data-npaw-article-category, and data-npaw-article-tag data-attributes are placed within the element that has the data-npaw-article data-attribute.
  3. The value of these data-attributes can be passed as an attribute value. If no value is provided, the inner text of the element will be considered.

All right! You've completed the installation. Now you can capture detailed information about the authors, categories, and tags of the articles on your home page