Measuring Form Submission Events Using AMP Analytics

Follow

We’ve got documentation that shows you how to track page views on your AMP page, but you may want to also track button clicks specifically on your AMP page. This requires a slightly modified AMP analytics code. 

 

Note:

If you already have the existing AMP analytics code on your pages and install this new code, this will cause 2 pageviews to be reported to GA. If you’d like to switch to this new code, please delete the old AMP analytics code before adding this new one. 

 

Follow the steps below to add AMP Analytics form submission events to your AMP landing page: 

What You’ll Need: 

 

Adding AMP Analytics to your AMP Unbounce Page: 

  1. Find your Google Analytics tracking ID. Record this number for later use.
  2. Navigate to the Unbounce AMP page where you’d like to add Google Analytics.
  3. Click the Edit in Builder link on the right side of the page to enter the Unbounce builder.
  4. Click on the Javascripts image2.png button at the bottom left-hand corner of the page. A new dialog box will appear.
  5. Copy and paste the Measure Events Script into the blank box. Make sure to change any instance of GA_MEASUREMENT_ID with the Google Analytics tracking ID that you recorded earlier from your Google Account.
  6. Type “AMP Analytics Component” in the blank Script Name Field and select Before Body End Tag from the Placement drop-down menu, then click the Save Code button at the bottom right corner of the dialog box.
  7. Save and Publish/Republish your Page.

Google Analytics tracking should now be active on your AMP page.

 

Using AMP Analytics to Track Form Submission

 GA currently doesn’t have a simple form submission tracker, but you can still track your form submissions using the workaround below: 

  1. Click on your form submission button, then find the ELEMENT ID section in the bottom of the Properties tab on the right side of the page.
  2. elementid2.png
  3. Select and Copy the ID value from the ELEMENT ID section.
  4. Click on the Javascripts image2.png button at the bottom left-hand corner of the page, and select your previously installed AMP Analytics Component script. 
  5. Modify your code as follows: 
    1. Replace the-button with your ELEMENT ID
    2. Replace login with a name of your choosing so that you can distinguish this form submit button from other buttons on your page. 
    3. Replace Google with AMP to specify that this button is on your AMP landing page. 
  6. Your Code should look like this when you’ve completed your changes: 

 

  1. Click the Save Code button at the bottom right corner of the dialog box. 
  2. Save and Republish your page. 

Create Tracking Events for more than One Button on an AMP Page

If you have more than one button on an AMP page and would like to track button clicks on all your buttons, you can amend the script above to do so: 

  1. Click on the button you’d like to track, then find the ELEMENT ID section in the bottom of the Properties tab on the right side of the page. 
  2. elementid2.png
  3. Select and Copy the ID value from the ELEMENT ID section.
  4. Click on the Javascripts image2.png button at the bottom left corner of the page, and select your previously installed AMP Analytics Component script. 
  5. Copy lines 10-16 of the code snippet above, and then paste it into the existing Javascript code on your landing page, between lines 16 and 17. 
  6. Modify the newly pasted code as follows: 
    1. Replace the-button with your ELEMENT ID
    2. Replace login with a name of your choosing so that you can distinguish this form submit button from other buttons on your page. 
    3. Replace Google with AMP to specify that this button is on your AMP landing page. 
  7. When completed, your new code should look like this: 

 

  1. Repeat the steps above for every button that you’d like to track. 

Need to track only page views? Check out our simplified GA code insertion here

 

Was this article helpful?
0 out of 0 found this helpful