triggersgoogle-tag-manageramp-htmlamp-analytics

Is it possible to push triggers from the amp-analytics tag to GTM?


I'm trying to figure out if I can push a click event from AMP to GTM. From what I've seen, the only option is to setup events in GTM to watch for the clicks because GTM creates the triggers(?). I don't know the actual answer, that is my best guess.
For instance, I'm was hoping to accomplish something like this. I'd want to be able to click this link and pass some vars with it.

<a href="url" title="lorem" id="this-trigger">Lorem Ipsum</a>
///
<amp-analytics>
    <script type="application/json">
        {
            "vars": {
                "lorem": "foo bar baz"
            },
            "triggers": {
                "anchorClicks": {
                    "on": "click",
                    "selector": "#this-trigger",
                    "request": "event",
                    "vars": {
                        "site_events": "lorem click",
                        "lorem": "lorem click"
                    }
                }
            }
        }
    </script>
</amp-analytics>

But the only thing that has worked is using GTM's triggers to watch for a click.
Is it possible to utilize amp-analytic's JSON triggers with GTM?

=====

Update: So I was missing the request property in the JSON. Thanks to @SomewhereDave.
I was also thinking about it wrong, this essentially bypasses GTM and goes straight to the analytics.

<a href="url" title="lorem" id="this-trigger">Lorem Ipsum</a>
///
<amp-analytics>
<script type="application/json">
{
  "requests: {
    "trigger1": "<The Request URL for the pixel>"
  }
  "vars": {
    "lorem": "foo bar baz"
  },
  "triggers": {
    "anchorClicks": {
      "on": "click",
      "selector": "#this-trigger",
      "request": "trigger1",
      "vars": {
        "site_events": "lorem click",
        "lorem": "lorem click"
      }
      }
  }
}
</script>
</amp-analytics>

Solution

  • If you create a click trigger with GTM the container snippet waits for click events to bubble up to the document node. This is called Auto Event Tracking by Google Tag Manager. So you could say that GTM creates the trigger.

    To use hard coded event tracking follow the instructions here. Just search for click trigger. A little bit more generic than in your example, your code should look something like this:

    <amp-analytics>
      <script type="application/json">
          "vars": {
              "id1": "#this-trigger"
          },
          "triggers": {
            "trackAnchorClicks": {
              "on": "click",
              "selector": "a, ${id1}",
              "request": "event",
              "vars": {
                "eventId": "clickOnAnyAnchor",
                "eventCategory": "This is the category of the event",
                "eventAction":"This is the action tied to the event",
                "eventLabel":"The label tied to the event"
              }
            }
          }
        }
      </script>
    </amp-analytics>
    

    Values defined within vars: {} are picked up by Google Analytics, if they are known. Here eventCategory, eventAction and eventLabel would populate the respective event fields. Notice that above's example is hard coded tracking.

    Unknown vars values will be ignored. If GTM is implemented with AMP key-value-pairs can be freely choosen and picked up by AMP variables then from within GTM (Simply navigate to the variables tab and create an AMP variable with the vars key).

    However, you first need to create a GTM AMP Container and load your container like this:

    <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-1A2B3C&gtm.url=SOURCE_URL" data-credentials="include">
      <script type="application/json">
      {
        "vars": {
          "eventId": "clickOnAnyAnchor"
        }
      }
      </script>
    </amp-analytics>
    

    A very well written article about using GTM with AMP here