AMP Story可使用哪些交互式组件？文档存疑及投票实现求助

Hey there! I feel your pain—trying to add a poll to an AMP Story and hitting vague docs is super frustrating, especially when workarounds like amp-consent fall flat. Let’s fix this with the actual dedicated component you should be using: amp-story-poll.

Step 1: Load the Poll Component Script #

First, you need to include the amp-story-poll component script in your document’s <head> section. This tells AMP to load the poll functionality:

<script async custom-element="amp-story-poll" src="https://cdn.ampproject.org/v0/amp-story-poll-0.1.js"></script>

Step 2: Add the Poll to Your Story Page #

Drop the poll directly inside an amp-story-page (wrap it in an amp-story-grid-layer for proper layout alignment). Here’s a complete, ready-to-use example:

<amp-story-page id="vote-page">
  <amp-story-grid-layer template="vertical">
    <h3>What's your go-to morning drink?</h3>
    <amp-story-poll id="drink-poll" layout="fixed-height" height="180">
      <amp-story-poll-option option="Coffee" votes="67"></amp-story-poll-option>
      <amp-story-poll-option option="Tea" votes="23"></amp-story-poll-option>
      <amp-story-poll-option option="Smoothie" votes="15"></amp-story-poll-option>
    </amp-story-poll>
  </amp-story-grid-layer>
</amp-story-page>

Step 3: Tweak It to Fit Your Needs #

• Initial vote counts: Use the votes attribute on each amp-story-poll-option to set starting numbers (perfect if you’re pulling saved results from a backend).
• Layout adjustments: The fixed-height layout is the most reliable for polls, but you can tweak the height value to match your story’s design.
• Track interactions: If you need to send vote results to your server, you can listen for the select event on the poll element and use amp-analytics or amp-form to send the data.

Why amp-consent Was a Bad Fit #

Just to clarify—amp-consent is built exclusively for managing user privacy consent prompts, not interactive voting features. Trying to repurpose it for polls will lead to weird behavior because it’s not designed for that use case. Stick to amp-story-poll and you’ll have a smooth, native voting experience.

I’ve used this setup for multiple AMP Story projects, and it works flawlessly every time. If you run into any specific issues while implementing it, feel free to follow up!

内容的提问来源于stack exchange，提问作者tarunsachdeva