Clicky

  1. Home
  2. How To
  3. How to track a click event in GTM AMP

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_categoryevent_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.


Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on May 8, 2020

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

Comments

  1. How could you use this to track external or affiliate links?

    in my use case I want to track whenever a user clicks a link to amazon, and i want to use the eventLabel to list the exact URL they clicked on.

    According to the amp-analytics project I’m supposed to do this by adding something like data-vars-event-label=”amazon link here” to every single individual link on my page.

    Does your plugin have a better solution to this?

    Is there some way to do it with google tag manger?

Leave a Comment