Comment tags use

Last updated
Save as PDF

Comment tags allow the Zephr CDN to identify and interpret the features in your website that are wrapped in HTML feature tags.

Features in your website are parts of an HTML document, such as the body of an article, a video or a data table, which are annotated with HTML comments, as shown in the following example:

<html>
<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <ul class="related-reading">…
       </ul>
    </div>
</body>

You could make decisions on whether an end user can access the article body by wrapping the article with comment tags, as shown below:

<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <!-- ZEPHR_FEATURE article-body -->
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <!-- ZEPHR_FEATURE_END article-body -->
       <ul class="related-reading">…
       </ul>
    </div>
</body>

Note: These comments are typically implemented in a CMS template.

When served through the Zephr CDN, the Zephr Comment Tags are recognised, and Zephr looks for a corresponding feature rule to use when handling that part of the content.

Zephr uses Comment Tags to break a document into a tree, which Zephr traverses in real-time to manipulate the content. You can nest Comment Tags, but each opening tag must have a closing tag, just like HTML tags.

Note: To avoid confusion when Zephr decides which rule to run, make sure that you do not use the same Comment Tag for multiple rules.

When you tag your site for Zephr, you can take either of the following approaches:

Add the tags to your site, then name your features in Zephr accordingly
Create your features in the Zephr Admin Console, then add the tags as they display in the Developer Interface for your feature in your site