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.
The Attentive tag can do the following:
- Show sign-up units on both mobile and desktop
- Capture behavioral data, page view, product view, add to cart, and purchase events
- Trigger messages, such as browse and cart abandonment
- Track revenue
Step 1. Get your Attentive tag
Contact your Attentive CSM or our White Glove team (whiteglove@attentivemobile.com) to get your organization's unique Attentive tag.
Your Attentive tag will look similar to the following example:
<script src="//cdn.attn.tv/YOUR_DOMAIN/dtag.js"</script
In your brand’s unique tag, your unique Attentive domain appears in place of YOUR_DOMAIN.
The dtag is Attentive’s dynamic tag loader. It’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’s under two KB in size and has no impact on your website.
Step 2. Add the Attentive tag
We recommend placing the Attentive tag at the bottom of the <body> tag on your website.
During the initial implementation, you can 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.
Step 3. Verify implementation of the tag
- Go to the URL where you’ve implemented the tag. If the tag is implemented correctly, you'll see several network requests that include
/attn.tv|events.att/ - Go to your cart or checkout pages to make sure the behavior in the previous step appears on all pages of the customer journey.
Appendix I: Attentive tag logic
The following describes the logic of the Attentive tag as it proceeds according to sequential steps:
- The tag asynchronously loads in the visitor's browser on the first page view of the session and remains in the browser cache to be used for the duration of the visit.
- When the javascript file is loaded, it waits for the page to reach the state of
DOM Ready, which means that it won't impact or slow the visual rendering of the page. Thedtagfile listens for the browser event namedDOMContentLoaded. - The
DOMContentLoadedevent fires when the initial HTML document is completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The tag only proceeds 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. See Attentive cookies for more information. It then creates an iframe wheresrc=client_domain.attn.tv/creative?. The iframe interfaces with the Attentive server, which does the following:
- Collects data about the visitor, page referrer URLs, impression data, user agent, etc.
- Governs client business rules, including allowlists, timeouts, etc.
- 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 number 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.
Appendix II: 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 for which you can't customize the underlying code, for example by adding or removing code to reduce overall file size. Sign-up units don’t block the page from loading. If your sign-up unit has 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.
We recommend the following optimizations to help improve sign-up unit performance on your website, especially to fonts and images (including background images and logos). These often account for anywhere between 50-80% of the total sign-up unit bundle size.
Fonts
If possible, limit the number of fonts used and consider using Google fonts, especially as a secondary font. We recommend sticking to two fonts where possible. Google fonts are a great choice because of available optimizations and widespread CDN.
For custom fonts, use more modern font formats like WOFF2/WOFF, if available.
Images
When using images, consider the context for how they'll be used and resize them accordingly. For example, because logos have a maximum height of 48 pixels by default, resize logo images to be 48 pixels tall. Similarly, because screen sizes on mobile devices are much smaller than on desktop, crop images for mobile sign-up units to an appropriate size.
You can also compress the quality of an image further to reduce the file size without creating perceivable differences in the image. It's also important to use appropriate compressed file types (e.g., JPG instead of PNG).
You can optimize images with design tools like Adobe Photoshop, command line tools like JavaScript Image Manipulation Program, and more.
Additional resources
Attentive works 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 more information.