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
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, which is the process described below.
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 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:
<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:
- 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.
- When the javascript file has loaded, it waits for the page to reach the state of
DOM Ready, which means that it won't impact nor slow the visual rendering of the page. Thedtagfile is listening for the browser event namedDOMContentLoaded. - The
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 theDOMContentLoadedevent is fired. See DOMContentLoaded event for more information. - The tag then requests additional javascript libraries, which 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.
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 wheresrc=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 ishtml/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
- Visit the URL where you’ve implemented the tag. If the tag is implemented correctly, you'll see several network requests including
//cdn.attn.tv/attn.js - 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'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.
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. These are much more optimized than older formats.
Images
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 .png).
You can accomplish these image optimizations 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 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.