Add the Attentive tag to your website to take full advantage of Attentive features. The tag is optimized for size and security to make sure your page speed isn't affected. It's responsible for the following:
- Showing the sign-up unit (on both mobile and desktop)
- Capturing behavioral data (such as page views and purchases)
- Triggering events (such as abandoned cart, abandoned browse, and post-purchase)
- Tracking revenue
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, which is the process described below.
Contact our White Glove team (email@example.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 on 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 to place on your website:
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:
- 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.
DOM Ready, which means that it won't impact nor slow the visual rendering of the page. The
dtagfile is listening for the browser event named
DOMContentLoadedevent 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 the
DOMContentLoadedevent is fired. See DOMContentLoaded event for more information.
attn.jscreates a unique visitor identifier and stores it as a cookie. (For more information on cookies, see Attentive cookies.) 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.
attn.jsdisplays the sign-up unit received back from the server (the payload is
- 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
- Visit the URL where you’ve implemented the tag. If the tag is implemented correctly, you'll see several network requests including
- Navigate to your cart or checkout pages to make sure the behavior in the previous step appears on all pages of the customer journey.
dtag is Attentive’s dynamic tag loader and is the file that's 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 you configure them to do so. Sign-up units are a lightweight app built by Attentive in which you can't customize the underlying code, such as add and remove code to reduce overall file size. Sign-up units won't 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.
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. These are much more optimized than older formats.
When using images, try to consider the context for how they'll be used and resize them accordingly. For example, since logos have a max height of 48 pixels by default, resize the uploaded logo image to be 48 pixels tall. Similarly, since screen sizes on mobile devices are much smaller than on desktops, try to crop pictures to an appropriate size.
Additionally, you can compress the quality of an image further to reduce the file size without noticing any perceivable differences in the image. It's important to also consider using appropriate compressed file types (for example,
.jpeg instead of
We work with tag management solutions that 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 CartHook tag integration, Google Tag Manager (integration), Tealium tag integration, or Wordpress tag integration for details.