Using the Mezzobit Visual tagger

The Mezzobit Visual Tagger allows you to place and manage tags with visual components like ad units or social sharing widgets.

This feature fills a need that every website operator has: how do I manage all of the visual modules of my page that rely on JavaScript, both first- and third-party. And how do I ensure that these elements don't hang or break the rest of the page. In conversations that we've had with dozens of customers, this is a particularly big issue for ad units that rely on a cascading series of third-, fourth-, and fifth-party calls that add to page latency.

We offer two ways to handle this:

  • Technically savvy users can specify that a tag has a visual component and manually provide the CSS selection code that locates where the tag should be placed on the page. This is particularly easy if there is a unique ID associated with the page element where the tag should go.
  • But deep HTML/CSS understanding isn't required to make this feature work. In the tag editor, you can activate the Visual Tagger bookmarklet that displays the target page and permits you to just click on the location where the tag should be placed. The system will then display the CSS code associated with that location, which can be edited or accepted. You can re-situate a tag as many times as you like.

Follow the steps below to start using the Visual Tagger:

1. Create your containers, tags, and rules in Trusted Data Interchange.

2. Set up the Mezzobit Visual Tagger for a tag:

  • Open a tag in the tag editor.
  • Type the anticipated deployment URL in the Default deployment URL box.  The Mezzobit Visual Tagger uses this URL to place tags on a page.
  • Select Yes next to Is there a visual component.

Is there a visual component

    • Right-click the Mezzobit visual tagger link and create a bookmark in your browser.

Mezzobit visual tagger

    • Click Open it.

Open it

  • The default deployment URL is opened in your browser.
  • Click your new Mezzobit Visual Tagger bookmark.
  • The visual tag editor is displayed.

Visual tag editor

3. In the visual tag editor, click Select location and then click the area of the webpage where the tag should be placed.

4. Click Save and return to save the tag location and return to TDI.

The tag will fire on any page on the website where the visual location exists.

5. Test your container:

    • In the container editor, click More options under HTML code installation.More options
    • Right-click the test link and create a bookmark in your browser.Right-click to create a bookmark
    • Open your website in another browser tab.
    • Click your new bookmark.  The page will stay the same, but the tag manager code will be inserted on the fly.
Have more questions? Submit a request


Please sign in to leave a comment.