amp-accordion is a stacked list of headers that collapse or expand content sections with user interaction. It can be useful to track when users click on a header to know which content is the most popular.

To achieve this, you can use the following HTML code.

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "G-XXXXX"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "pageview"
        },
        "click on .i-amphtml-accordion-header trigger": {
          "on": "click",
          "selector": ".i-amphtml-accordion-header",
          "request": "event",
          "vars": {
            "eventCategory": "accordion",
            "eventAction": "clicked-header"
          }
        }
      }
    }
  </script>
</amp-analytics>

<amp-accordion animate>
  <section>
    <h3 data-vars-event-label="foo">Foo</h3>
    <div>
      <p>Content</p>
    </div>
  </section>
  <section>
    <h3 data-vars-event-label="bar">Bar</h3>
    <div>
      <p>Content</p>
    </div>
  </section>
</amp-accordion>

An event will be fired when users click on an accordion header, a .i-amphtml-accordion-header element. The event label can be controlled in the HTML to track interactions.