Installing the Taglayer tracking code

For optimal performance, add the Taglayer snippet to the <head> tag of the HTML for your site. We recommend implementing the snippet as high up in the head tag as possible, generally after your <html> tag, charset declarations, and possibly other meta tags. Place the Taglayer snippet before code for any analytics or heat-mapping platforms as well.

Place these before the snippet:

  • Charset declarations and other meta tags, like <meta charset='utf-8'>

Place these after the snippet:

  • All other elements on your page
  • Any analytics or heat-mapping code
  • Other content in a Tag Manager

Here’s what the Taglayer snippet might look like on a page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Add other meta information here -->
    <!-- Add stylesheets here -->
    <script async type="text/javascript" src="//tglyr.co/latest.js?n=o"></script>
    <!-- Add scripts and other content here -->
  </head>
  <body>
    ...
  </body>
<html>

Why in the top of the head tag?

Taglayer works by making changes to your page as the page loads. If the snippet is added to the top of the head tag, then Taglayer will make changes to the page as it loads.

If the snippet is added anywhere lower, it will technically still work. But if the page has already loaded content that the visitor sees before the Taglayer snippet loads, the original version of the page may load before being transformed into the variation by Taglayer. This is known as “page flashing”. In most cases, the code executes too quickly for this to be visible. But to avoid any potential problems we suggest adding the snippet as early in the execution path as possible.

<script async type="text/javascript" src="//tglyr.co/latest.js?n=o"></script>

Loading asynchronously will prevent any delay in page load because the page will attempt to load all elements simultaneously, including your personalization experiences.