AMP: Building Accelerated Mobile Pages

Variable substitution in <amp-analytics>

In the last example, the vars variables were given static values, but there are some interesting things we can do with variable substitution here. For example, suppose we had two buttons. Instead of setting up two separate click handlers, it would be better if we could just substitute in the button ID dynamically.

With data attributes, we can define arbitrary element-level variables to use in the configuration. Any data attribute with the format data-vars-variable-name will be made available as ${variableName} in the analytics configuration. So we can update our button like this:

<button data-vars-button-id="Click me button">Click me!</button>

And we can then update the configuration object to use ...