How can we track click on link tags inside amp story pages

1.1k Views Asked by At

I have a amp story where I have also implemented tracking with Google Analytics. Events such as story-page-visible are working perfectly. But when I tried to track the click event on an anchor tag inside my story page it does not work.These are my triggers and anchor tag:

UPDATED CODE

 <amp-analytics type="gtag" data-credentials="include">
        <script type="application/json">
        {
          "vars": {
            "gtag_id": "UA-YYYY-Y",
            "event_category": "<%= storyName %>",
            "config": {
              "UA-YYYY-Y": {
                "groups": "default"
              }
            }
          },
          "extraUrlParams": {
            "cd75": "AMP",
            "cd69": "AMP",
            "cd81": "marketplace",
            "cd76": "${ampdocHostname}"
          },
          "triggers": {
            "linkClick" : {
              "on": "click",
              "selector": "a",
              "request": "event",
              "vars": {
                "eventCategory" : "click"
              }
            }
          }
        }
      </script>
    </amp-analytics>
 <a href="https://amp.dev/" >
                <p>click here to read more</p>
            </a>

No event is fired on click of anchor tag or on click of tooltip.Any suggestions would be really helpful.

2

There are 2 best solutions below

1
On

I tried your example and it seems to work. I'm posting the full configuration I used so you can compare with yours. Also, did you add the amp-analytics script in the head of your document?

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

--

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default click": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventCategory": "amp click"
      }
    }
  }
}
</script>
</amp-analytics>

Here you have a typo and forgot to close the </p> tag, but it should work nonetheless.

<a href="https://amp.dev/" >
  <p>click here to read more</p>
</a>
0
On

I faced the same issue adding event_name in triggers fixed the issue

   <amp-analytics type="gtag" data-credentials="include">
    <script type="application/json">
    {
      "vars": {
        "gtag_id": "UA-YYYY-Y",
        "event_category": "<%= storyName %>",
        "config": {
          "UA-YYYY-Y": {
            "groups": "default"
          }
        }
      },
      "extraUrlParams": {
        "cd75": "AMP",
        "cd69": "AMP",
        "cd81": "marketplace",
        "cd76": "${ampdocHostname}"
      },
      "triggers": {
        "linkClick" : {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "event_name" : "login",
            "eventCategory" : "click"
          }
        }
      }
    }
  </script>
</amp-analytics>