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 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.
If you plan to manually add the Attentive tag to your website, see the following sections to learn more:
- Add the Attentive tag
- After the tag is added
- Verify implementation of the tag
Contact our White Glove team (firstname.lastname@example.org) or your Client Strategy Manager at Attentive for your organization's unique 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:
You may notice that we've replaced
EXAMPLE with your custom Attentive domain.
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 will not 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
DOMContentLoadedevent is fired. See DOMContentLoaded event for more information.
attn.jscreates 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.
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.
- Visit the URL where you’ve implemented the tag. If the tag is implemented correctly, you will 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 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.
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.
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.
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
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.