{ORIGINAL DRAFT} Chrome Extension

HP4U > Chrome Extension

Overview

The Taboola Chrome extension provides a Head-Up Display (HUD) of your HP4U configuration, allowing you to validate your markup, and fine-tune your settings.

πŸ‘

Tip

When tagging your homepage, the Chrome extension can be an invaluable aid for validating your markup.

πŸ“˜

Additional resources

This page describes how to validate your markup.

For information about fine-tuning your settings, see the Taboola Newsroom Help Center.

🚧

First steps

In order to use the Chrome extension, you need a Taboola Newsroom account with the relevant permissions.

For more information, reach out to your Taboola Newsroom Engagement Manager.

Installing the extension

  1. Install the Taboola Chrome extension from the Chrome Web Store.

    Tip: Once installed, click on Extensions and pin the Taboola Newsroom icon.

Using the extension

Validation modes

The Chrome extension provides 2 validation modes:

  1. Automated (aka default) - these validations run automatically, as soon as Display page markup is enabled (see below).
  2. Manual - these validations are turned on manually, on a property-by-property basis.

Open the extension slide-out

  1. Open Google Chrome and browse to your homepage. Wait for the homepage to load fully.

    Tip: Once you have enabled the extension (see below), the icon turns blue when ready.

  2. Click on the extension icon to slide-out the extension window.

    Tip: You may need to click on Extensions to see the icon.

  3. If you are not logged into Taboola Newsroom, the extension will prompt you to log in.

    In order to use the Chrome extension, you need a Taboola Newsroom account with the relevant permissions.

Review automatic validations

  1. Open the extension slide-out.

  2. Enable the extension, using the toggle switch provided (top, right).

    • Tip: At any time, use this toggle to turn off (/on) all annotations, allowing you to quickly view a 'clean' homepage.
  3. On your homepage, note how various annotations display for each item - e.g.:

    • A De-duped label (bottom of relevant slot).

      Indicates that the slot is curated and has been marked for deduplication.

    • A Personalized label (bottom of relevant slot).

      Indicates that the slot is serving personalized content.

    • A Settings icon ( top, right of each slot).

      Used to adjust settings for each slot.

  4. In the extension slide-out, select the Validation tab (middle, right).

  5. Click on the Display page markup toggle switch (middle, right).

  6. On your homepage, note how each item displays a validation icon (top, left):

  7. Review the icon shown for each slot, noting those slots with a failure or warning status:

IconStatusDescription
Failure1 or more validations failed for this item.
Warning1 or more properties in this item might need fixing.
SuccessAll validations passed for this item.
  1. To see more information, mouse over the status icon:
  2. Review each item of interest, and make any needed corrections.

Review manual validations

🚧

Before you start

In order to turn on manual validations, you must first turn on automatic validations. (above).

  1. In the extension slide-out, select the Validation tab.

  2. Locate the color-coded list of item properties (shown below).

  3. For each item property, use the checkbox provided to turn validations on/off.

  4. For example:

    1. Select Title:
    2. On your homepage, annotations for Title are toggled on (with the same color as the property list):
    3. Deselect Title (by clearing the checkbox).

      On your homepage, annotations for Title are toggled off:

  5. Toggle validations on for any properties of interest. On your homepage, each property is marked with a matching color - e.g. titles in yellow, links in green, etc.

  6. The extension also marks each item with an icon - based on automatic and manual validations:

    IconStatusDescription
    Failure1 or more validations failed for this item.
    Warning1 or more properties in this item might need fixing.
    SuccessAll validations passed for this item.
  7. To see more information, mouse over the status icon.

  8. Review each item of interest, and make any needed corrections.

  9. Note that a given slot might not contain the selected property at all. If that is intentional, then simply ignore the error flagged. For example:

    1. In the property list, the user selectsImage (to run validations for slots that do contain images).
    2. A given slot (shown below) does not contain an image at all.
    3. The extension detects that there is no data-tb-image attribute within that slot, and flags an error: Missing tag(s): Image.
    4. However, since this slot is not supposed to contain an image at all, you can simply ignore the error and move on to the next slot.