The Attentive tag

The Attentive tag must be added to your website in order to take full advantage of Attentive features. It is optimized for size and security to make sure your page speed is not affected. It is responsible for the following:

  • Showing the sign-up unit (creatives on both mobile and desktop)
  • Capturing behaviorial data (such as page views and purchases)
  • Triggering events (such as abandoned cart, abandoned browse, and post-purchase)
  • Tracking revenue

Important!

If you're planning to add the Attentive tag to your Shopify website, the tag is automatically installed as part of the Shopify integration setup process. We recommend following our Shopify integration guide rather than installing the tag manually.

If you plan to manually add the Attentive tag to your website, see the following sections to learn more:

Prerequisite

Contact our White Glove team (whiteglove@attentivemobile.com) or your Client Strategy Manager at Attentive for your organization's unique Attentive tag.

Add the Attentive tag

We recommend placing the Attentive tag in the bottom of the <body> tag in your website. During initial integration, you may first add the tag to a development or staging instance of your website so that we can perform basic connectivity testing before pushing to production.

The following tag is an example of what needs to be placed on your website:

<script src="//cdn.attn.tv/EXAMPLE/dtag.js"></script>

You may notice that we've replaced EXAMPLE with your custom Attentive domain.

After the tag is added

The following describes the logic that occurs in sequential steps:

  1. The tag will asynchronously load in the visitor's browser on the first page view of the session and remain in the browser cache to be used for the duration of the visit.
  2. When the javascript file has loaded, it waits for the page to reach the state of DOM Ready, which means that it will not impact nor slow the visual rendering of the page. The dtag file is listening for the browser event named DOMContentLoaded.
  3. The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. We will only proceed when DOMContentLoaded event is fired. See DOMContentLoaded event for more information.
  4. The tag then requests additional javascript libraries that are similarly cached in the browser. These files load and execute in the background and serve to capture behavioral events based on the visitor's activity. The data collected by these libraries is used to segment visitors for subsequent SMS campaign messaging relevant to their actions.
  5. attn.js creates a unique visitor identifier and stores it as a cookie. It then creates an iframe where src=client_domain.attn.tv/creative?. The iframe interfaces with the Attentive server, which does the following:

    • Collects data on the visitor, page referrer URLs, impression data, user agent, and so on.
    • Governs client business rules including whitelists, timeouts, and so on.
    • Fetches and returns the relevant sign-up unit to display.
  6. attn.js displays the sign-up unit received back from the server (the payload is html/javascript). The following occurs:

    • The sign-up unit is rendered client-side on the visitor’s device.
    • The payload is instrumented to track user interaction (such as the amount of clicks) with the sign-up unit.
    • The tag can be configured to support single-page application (SPA) sites by detecting page navigation.
    • All Attentive assets are served from a content delivery network (CDN)​ and compressed to minimize latency.

Verify implementation of the tag

  1. Visit the URL where you’ve implemented the tag. If the tag is implemented correctly, you will see several network requests including //cdn.attn.tv/attn.js
  2. Navigate to your cart or checkout pages to make sure the behavior in the previous step appears on all pages of the customer journey.

Additional information

This dtag is Attentive’s dynamic tag loader and is the file that is responsible for loading attn.js and either tag.js (modern tag) or analytics.js (legacy tag). The dtag is the file that waits before loading other files. It is under two kilobytes in size and has no impact on your website.

Sign-up unit optimization

While the Attentive tag loads on the initial page load (with no impact on your site), sign-up units load when configured to do so. Sign-up units are a lightweight app built by Attentive in which you cannot customize the underlying code, such as add and remove code to reduce overall file size. Sign-up units will not block the page from loading. If your sign-up unit has a large image or font files, it may take longer to load, which could affect whether users navigate to a different page before seeing the sign-up unit.

The following are some recommendations to help improve a sign-up unit’s performance on your website through asset optimization. This mostly refers to fonts and images (background images, logos). These most often account for anywhere between 50-80% of the total sign-up unit bundle size on average.

Fonts

If possible, limit the amount of fonts used, and consider using google fonts (especially as a secondary font). Fonts can be quite heavy, so we recommend sticking to two fonts where possible. Google fonts are a great choice to use due to all the optimizations and widespread CDN.

For custom fonts, use more modern font formats like WOFF2/WOFF if available, which are much more optimized than older formats.

Images

When using images, try to consider the context for how it will be used and resize the image accordingly. For example, for logos since they have a max height of 48 pixels by default, resize the uploaded logo image to be 48 pixels tall. Similarly for mobile devices, since screen sizes are much smaller than desktops, try to crop pictures to an appropriate size.

Additionally, you can compress the quality of the image further to reduce the file size without noticing any perceivable differences in the image. It is important to also consider using appropriate compressed file types (for example, .jpeg instead of .png).

The above image optimizations can be done through design tools such as Adobe Photoshop, command line tools like JavaScript Image Manipulation Program, and more.

Additional resources

We work with tag management solutions, which allow clients to manage and deploy marketing tags (snippets of code or tracking pixels) on their website without having to modify the code. For example, you can add the Attentive tag if you currently manage your website tags with Google Tag Manager. See BigCommerce tag integration, CartHook tag integration, Google Tag Manager, Tealium tag integration, or Wordpress tag integration for details.