Isn’t it amazing how mobile applications deliver instant notifications for almost everything– news flashes, credit balances, inventory reports, or changed wishlist prices? Offering real-time information is the most effective strategy to catch users’ attention and interest.
Now imagine the same experience right inside emails. The amp-list component in AMP for emails makes it possible to display dynamic feeds in user inboxes. Let us find out how the amp-list manages to achieve this.
1. What are the benefits of the amp-list component?
The amp-list component allows you to include dynamically updated lists in AMP emails. For example, you can display revised carts, additional product images, interactive calendars, quizzes, order status, etc. Here are some advantages of using amp-list in AMP emails.
1.1. Grab user attention
Live updates on falling inventory for abandoned cart products or wishlist items often drive users to make instant purchases. Updating the list of items for holiday destinations, apparel, home decor, academic courses, blog posts, etc., based on user preferences is another way of generating more leads using amp-list.
1.2. Offer personalized interaction
You can use the component to add interactive items of interest like personalized offers, subscription settings, booking calendars, and more in AMP emails. Offering customers the most relevant choices and allowing them to interact from the comfort of their inboxes boosts conversions.
1.3. Create easily consumable content
The list format accommodates more content in a limited space, creating an easy reading experience. In addition, users get app-like capabilities within emails wherein they can:
- Browse through dynamically updating product images
- Unlock deals and offers specific to their needs and interests
- Do bookings and registrations with interactive calendars
- Fill up their shopping carts using custom recommendations
A userbase that interacts and engages with your emails matters the most for your marketing campaign’s ROI.
2. How to use the amp-list component?
The amp-list component dynamically downloads data and creates list items using a template.
Required Scripts: <script async custom-element=”amp-list” src=”https://cdn.ampproject.org/v0/amp-list-0.1.js”></script>
amp-list fetches dynamic content from a CORS JSON endpoint. The response from the endpoint contains data that displays in the specified template.
You can specify a template in one of two ways:
- A template attribute that references an ID of an existing templating element
- A templating element nested directly inside the amp-list element
By default, <amp-list> adds a list ARIA role to the list element and a listitem role to item elements rendered via the template. If the list element or any of its children are not “tabbable” (accessible by keyboard keys such as the a and button elements or any elements with a positive tabindex), a tabindex of 0 will be added by default to the list item. This behavior is arguably not always appropriate – generally, only interactive controls/content should be focusable. If you want to suppress this behavior, include tabindex=”-1″ as part of the outermost element of your template.
AMP batches XMLHttpRequests (XHRs) to JSON endpoints; you can use a single JSON data request as a data source for multiple consumers (e.g., multiple <amp-list> elements) on an AMP page. For example, if your <amp-list> makes an XHR to an endpoint while the XHR is in flight, all subsequent XHRs to the same endpoint won’t trigger and will instead return the results from the first XHR.
Optionally, the <amp-list> component can contain an element with the overflow attribute. AMP will display this element on meeting all of the following conditions:
- The contents rendered into the amp-list exceed its specified size.
- The bottom of the amp-list is within the viewport.
- The bottom of the amp-list is not near the bottom of the page (defined as the minimum of either the bottom 15% of the document or the bottom 1000px).
Optionally, <amp-list> supports a placeholder and/or fallback.
- A placeholder is a child element with the placeholder attribute. This element displays until the <amp-list> loads successfully. If a fallback is also present, the placeholder remains hidden when the <amp-list> fails to load.
- A fallback is a child element with the fallback attribute. If the <amp-list> fails to load, this element displays on the screen.
The <amp-list> element exposes a refresh action that other elements can reference in on=”tap:…” attributes.
In several cases, we may need the <amp-list> to resize with user interaction. For example, when the <amp-list> contains an amp-accordion that a user may tap on when the contents of the <amp-list> change size due to bound CSS classes. The changeToLayoutContainer action handles this by changing the amp list to layout= “CONTAINER” when triggering this action.
If you wish to learn more about the amp-list component for email, visit amp.dev.
3. Variations of the amp-list component
The amp-list component has several attributes that can contribute to fine-tuning user engagement.
3.1. Specify endpoint to fetch live data
Using the src attribute, you can specify the URL of the remote endpoint, such as a Google document that returns the JSON for amp-list to render. If fetching the data at the src URL fails, the <amp-list> triggers a low-trust fetch-error event. The author can also set the credential mode through the credentials attribute. By specifying the credentials mode, the origin can include cookies in the CORS request and also set cookies in the response (subject to third-party cookie restrictions).
3.2. Create repeating content sections
In <amp-list>, you can use the items attribute to render a subset of the JSON response, allowing you to have multiple <amp-list> elements showing different content but sharing a single XHR. You can use this to create content sections with repetitive elements like blog titles and descriptions, news heading and details, etc.
3.3. Optimize page load
Use the binding attribute for pages using <amp-list> and amp-bind to allow or block render on the evaluation of bindings (e.g. [text]) in rendered children. Google recommends using binding=”no” or binding=”refresh” for faster performance.
binding=”no”: Never block render (fastest).
binding=”refresh”: Don’t block render on initial load (faster).
binding=”always”: Always block render (slow).
In the absence of the binding attribute, the default is always.
amp-list is frequently combined with the amp-form, amp-accordion, and amp-mustache components to make the emails even more effective.
4. How can Netcore Cloud help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries.
Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.
At Netcore Cloud, we help you set up and integrate AMP for email with the shortest TAT. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns.
Netcore Cloud works as an extension of your team to provide result-oriented solutions. With Netcore Cloud’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals.
Netcore Cloud’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenues.
Connect with us to understand how you can benefit from our expertise and experience.
