How to track a click event in GTM AMP

Let’s see how to add Advanced Google Analytics like page, event, social tracking in AMP.

You will find this option in the WordPress Admin Area -> AMP option panel -> Settings -> Analytics

• Google Tag Manager: First enable the Google Tag Manager option and Enter the Analytics ID.

• Advanced Google Analytics: Enable the Advanced Google Analytics option. As you can see there is a JavaScript editor to add the Analytics code in JSON format.
• Change the “<GA_MEASUREMENT_ID>” with your Google Analytics ID.
• Enter other tracking code in place of “// Enter your Advanced Analytics code here”.

Measure events

Use triggers with defined values to measure events in AMP pages. These properties are used in a trigger configuration:

• selector: a CSS selector to specify a target element.
• on: specifies the type of event.
• vars: specify the type of event in event_name, and add additional parameters as necessary.

This example demonstrates how to set up a basic Google Analytics event. Create a trigger called “button” that will fire when an element with an ID value of “the-button” is clicked. This trigger will send an event_name value of “login” and a method value of “Google” to Google Analytics:

Example code:

{
      "vars": {
        "gtag_id": "",
        "config": {
         "": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }

Google Analytics Events are a category of events specific to Google Analytics that are commonly used to build reports on campaigns. These values can be specified in the vars block with event_category, event_label, and value parameters:

Example code:

{
      "vars": {
        "gtag_id": "",
        "config": {
          "": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }

Modify parameters

To override default Google Analytics parameters or add new parameters, add the desired values to the parameter section of your config block. This example overrides the default pageview and event values for page_title and page_location:

Example code:

{
  "vars" : {
    "gtag_id": "",
    "config" : {
      "": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}

Before adding this two variable make sure you need to activate Yoast SEO plugin.

After adding another tracking code, your code should look like this:

If you want to check Google Analytics Event then you need to follow the below Screenshot.

You will find this option first log in to Google Analytics -> Reporting -> behavior -> Events -> Here is a list of Events Category.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.