GA4 conversion tracking for AMP

AMP pages are generated differently compared to standard pages, which means the code used on them has to be adapted specifically for AMP. In this article, you can find the code you need to add to your AMP page in order to track conversions inside your GA4 account.

NOTE: If you want to implement GA4 conversion tracking on an AMP page, do not use our native GA4 integration at the same time. It is enough to use the code in this article. 

Any of the codes below will need to be placed in HTML -> Body. AMP validation will return errors if the codes are placed anywhere else.

Tracking form submissions

You will need to replace some parts of the code by adding your GA4 Measurement ID on the 8th and 10th lines and then customizing the "event_name" value.

Tracking button clicks

This code works with only one specific button; if more than one button needs to be tracked, the code needs to be edited to contain multiple “buttonClick” key - value pairs while each key needs to be unique. Example: “buttonClick1”, “buttonClick2” etc.

You need to replace some parts of the code by adding your GA4 Measurement ID on the 8th and 10th lines, adding the element ID of the button you want to track on the "selector" line, and then customizing the "event_name" value.

To get the element ID of a button, go to the live page, right click the button, Inspect element, and take the ID from there. Then place it in the snippet, as shown in the GIF below:

AMP button element ID.gif

 

Tracking form submissions and button clicks at the same time

To track both form submissions and button clicks simultaneously, you need to replace some parts of the code by adding your GA4 Measurement ID on the 8th and 10th lines, adding the element ID of the button you want to track on the "selector" line, and then customizing the "event_name" values.