How to use AMP for email to track open click?

Question

I was looking to get open/click tacking using AMP for Emails but yet to find any conclusive document to get any idea that how I can get tracking using AMP for emails.

Below is the sample code give by AMP but there is no tracking link of something given.

<!--
## Introduction

This sample demonstrates how to display a feed of data, allowing the user to go through
a large number of items in an email without having to scroll.

The sample uses a combination of [`amp-list`](/documentation/components/amp-list),
to fetch the initial items from the server and [`amp-form`](/documentation/components/amp-form),
to "refresh" a single item, by making a new server request.
-->

<!-- -->
<!doctype html>
<html ⚡4email lang="en" data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>

  <!--
    ## Styles

    We use CSS to hide the initially fetched item after the form is first submitted.

    We also define a layout that allows us to have fixed card sizes, to ensure form submissions don't result in content jumps.
  -->
  <style amp-custom>
    .amp-form-submit-success .initial-content,
    .amp-form-submitting .initial-content,
    .amp-form-submit-error .initial-content {
      display: none;
    }

    .card {
      width: 160px;
      height: 120px;
      margin: 10px;
      float: left;
      position: relative;
    }

    .card .next-button {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <!--
    ## Single item template

    Define a template for a single item inside a card and give it an `id`. This template is used by `amp-form` for displaying new items.

    In this case, we use a single `amp-img`.
  -->
  <template id="item-template" type="amp-mustache">
    <amp-img src="{{items.imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
  </template>

  <!--
    ## Initial list of items

    We define a template for the initial items and their layout and give it an `id`, allowing us to use it subsequently in an amp-list. This template is used by `amp-list` for fetching the initial up-to-date contents from the server.

    It contains in itself an `amp-form` for each item which references the template defined above referred by its `id`. By using a different template for the `amp-form`, we're able to "refresh" a part of the content, namely the image in this case.

    Note: This template contains the same markup (in this case, a single `amp-img`) as used in the template above to render the initial items. This is wrapped inside `<div class="initial-content">` which becomes hidden the first time the user submits the form.
  -->
  <template id="list-template" type="amp-mustache">
    <form class="card" method="post" action-xhr="https://amp.dev/documentation/examples/api/photo-stream?single&width=160&height=90">
      <div class="initial-content">
        <amp-img src="{{imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
      </div>

      <div submit-success template="item-template"></div>

      <input class="next-button" type="submit" value="Next">
    </form>
  </template>

  <!--
    We use `amp-list` to render the initial items from the server using the template defined above referred by its `id`.

    The height matches the combined height of our cards and their margins. The initial server response defines the number of cards to be displayed (in this case four).
  -->
  <amp-list template="list-template" src="https://amp.dev/documentation/examples/api/photo-stream?width=160&height=90&items=4" layout="fixed" width="360" height="280">
  </amp-list>
</body>
</html>

Can anyone give a idea to implement tracking on this? Thanks

Answer 1

The documentation says "AMPHTML allows tracking email opens with pixel tracking techniques, same as regular HTML emails."

There is therefore no specific AMP way of doing it--it's just normal.

So, normally the ESP handles open tracking, and perhaps click tracking too, by rewriting the URLs. Alternatively, you can add for example UTM links if you use Google Analytics on the site the links are going to.

How to use AMP for email to track open click?

Question

1 answers

solution1
0 2022-09-13 23:03:18

How to use AMP for email to track open click?

Question

1 answers

solution1 0 2022-09-13 23:03:18

solution1
0 2022-09-13 23:03:18