{"id":10417,"date":"2024-11-06T22:43:18","date_gmt":"2024-11-06T22:43:18","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10417"},"modified":"2024-11-06T22:43:18","modified_gmt":"2024-11-06T22:43:18","slug":"how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/","title":{"rendered":"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager"},"content":{"rendered":"<p>Setting up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager (GTM) allows you to track user interactions on your AMP pages, similar to how you would track traditional web pages. However, AMP pages have a slightly different structure and limitations compared to regular pages, so you need to ensure that the tracking is implemented properly to work within the AMP framework.<\/p>\n<p>Here\u2019s a step-by-step guide on how to set up AMP tracking with Google Tag Manager:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#1_Create_a_New_Container_for_AMP_Pages\" title=\"1. Create a New Container for AMP Pages\">1. Create a New Container for AMP Pages<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Steps_to_create_a_container_for_AMP\" title=\"Steps to create a container for AMP:\">Steps to create a container for AMP:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#2_Install_AMP_Analytics\" title=\"2. Install AMP Analytics\">2. Install AMP Analytics<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Steps_to_Install_AMP_Analytics\" title=\"Steps to Install AMP Analytics:\">Steps to Install AMP Analytics:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#3_Set_Up_Google_Analytics_Tags_in_GTM\" title=\"3. Set Up Google Analytics Tags in GTM\">3. Set Up Google Analytics Tags in GTM<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Steps_to_set_up_Google_Analytics_tracking_in_GTM_for_AMP\" title=\"Steps to set up Google Analytics tracking in GTM for AMP:\">Steps to set up Google Analytics tracking in GTM for AMP:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#4_Use_Other_Tags_for_Enhanced_Tracking\" title=\"4. Use Other Tags for Enhanced Tracking\">4. Use Other Tags for Enhanced Tracking<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Track_Form_Submissions_on_AMP\" title=\"Track Form Submissions on AMP:\">Track Form Submissions on AMP:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Track_Clicks_on_AMP\" title=\"Track Clicks on AMP:\">Track Clicks on AMP:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#5_Test_and_Debug_AMP_Tags\" title=\"5. Test and Debug AMP Tags\">5. Test and Debug AMP Tags<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Steps_to_test_your_AMP_tags\" title=\"Steps to test your AMP tags:\">Steps to test your AMP tags:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#6_Publish_Your_Container\" title=\"6. Publish Your Container\">6. Publish Your Container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"1_Create_a_New_Container_for_AMP_Pages\"><\/span><strong>1. Create a New Container for AMP Pages<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you\u2019re using Google Tag Manager (GTM), the first thing you should do is ensure that you have a container set up specifically for your AMP pages. This will help you keep your AMP tags separate from your non-AMP tags.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Steps_to_create_a_container_for_AMP\"><\/span>Steps to create a container for AMP:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li><strong>Login to Google Tag Manager:<\/strong>\n<ul>\n<li>Go to <a href=\"https:\/\/tagmanager.google.com\/\" target=\"_new\" rel=\"noopener\">Google Tag Manager<\/a> and log in with your Google account.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Create a New Container:<\/strong>\n<ul>\n<li>Click on <strong>Admin<\/strong> in the sidebar.<\/li>\n<li>Under <strong>Container<\/strong>, click <strong>Create Container<\/strong>.<\/li>\n<li>Select <strong>Web<\/strong> for the platform and name the container appropriately (e.g., &#8220;AMP Container&#8221;).<\/li>\n<li>Choose <strong>AMP<\/strong> under the &#8220;Target Platform&#8221; option.<\/li>\n<li>Click <strong>Create<\/strong> and agree to the GTM Terms of Service.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Add the AMP Container to Your AMP Pages:<\/strong>\n<ul>\n<li>After creating the container, you will be given a code snippet to include in the head of your AMP pages. You must include the GTM container code in your AMP HTML file for GTM to function on your AMP page.<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">custom-element<\/span>=<span class=\"hljs-string\">\"amp-analytics\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.ampproject.org\/v0\/amp-analytics-0.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"2_Install_AMP_Analytics\"><\/span><strong>2. Install AMP Analytics<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since AMP pages are optimized for speed and have restrictions on traditional JavaScript, you need to use the <code>&lt;amp-analytics&gt;<\/code> tag for tracking purposes. GTM can trigger AMP-compatible analytics tags using <code>amp-analytics<\/code> instead of standard analytics tags.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Steps_to_Install_AMP_Analytics\"><\/span>Steps to Install AMP Analytics:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li><strong>Add the AMP Analytics Script to the AMP Page:<\/strong>\n<ul>\n<li>In your AMP HTML, add the following code to load the AMP Analytics component:<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">custom-element<\/span>=<span class=\"hljs-string\">\"amp-analytics\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.ampproject.org\/v0\/amp-analytics-0.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li><strong>Create an AMP Analytics Configuration:<\/strong>\n<ul>\n<li>AMP pages use the <code>&lt;amp-analytics&gt;<\/code> element to configure analytics tracking. This element should be placed within the <code>&lt;body&gt;<\/code> tag of your AMP page.<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">amp-analytics<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"googleanalytics\"<\/span>&gt;<\/span><br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"application\/json\"<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n    {<br \/>\n      <span class=\"hljs-string\">\"vars\"<\/span>: {<br \/>\n        <span class=\"hljs-string\">\"account\"<\/span>: <span class=\"hljs-string\">\"UA-XXXXXX-X\"<\/span><br \/>\n      },<br \/>\n      <span class=\"hljs-string\">\"triggers\"<\/span>: {<br \/>\n        <span class=\"hljs-string\">\"trackPageview\"<\/span>: {<br \/>\n          <span class=\"hljs-string\">\"on\"<\/span>: <span class=\"hljs-string\">\"visible\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"request\"<\/span>: <span class=\"hljs-string\">\"pageview\"<\/span><br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">amp-analytics<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Replace <code>\"UA-XXXXXX-X\"<\/code> with your own Google Analytics tracking ID.<\/li>\n<li>The configuration provided will track pageviews when the page becomes visible to the user.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"3_Set_Up_Google_Analytics_Tags_in_GTM\"><\/span><strong>3. Set Up Google Analytics Tags in GTM<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that you&#8217;ve set up the necessary <code>&lt;amp-analytics&gt;<\/code> code, you&#8217;ll need to configure the tags within Google Tag Manager to trigger the AMP-compatible tracking.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Steps_to_set_up_Google_Analytics_tracking_in_GTM_for_AMP\"><\/span>Steps to set up Google Analytics tracking in GTM for AMP:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li><strong>Log in to Google Tag Manager:<\/strong>\n<ul>\n<li>Go to the <a href=\"https:\/\/tagmanager.google.com\/\" target=\"_new\" rel=\"noopener\">Google Tag Manager<\/a> and log in.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Create a New Tag:<\/strong>\n<ul>\n<li>Go to your <strong>AMP Container<\/strong> in GTM.<\/li>\n<li>Click <strong>Tags<\/strong> in the left sidebar.<\/li>\n<li>Click <strong>New<\/strong> to create a new tag.<\/li>\n<li>Choose the <strong>Tag Type<\/strong> as <strong>AMP Analytics<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure Your Google Analytics Tag:<\/strong>\n<ul>\n<li>Select <strong>Google Analytics<\/strong> as the tag type for the AMP Analytics configuration.<\/li>\n<li>In the tag configuration, choose <strong>Google Analytics: Universal Analytics<\/strong> as the tag type.<\/li>\n<li>Enter your <strong>Tracking ID<\/strong> (e.g., <code>UA-XXXXXX-X<\/code>) in the <strong>Tracking ID<\/strong> field.<\/li>\n<li>Set <strong>Track Type<\/strong> to <strong>Page View<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Add Trigger:<\/strong>\n<ul>\n<li>Set the trigger to <code>All Pages<\/code> or a specific trigger based on your needs. This will determine when the tag should fire (typically when a page is loaded).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save and Publish:<\/strong>\n<ul>\n<li>Save the tag and publish the changes in your GTM container.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"4_Use_Other_Tags_for_Enhanced_Tracking\"><\/span><strong>4. Use Other Tags for Enhanced Tracking<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>AMP supports enhanced tracking features such as tracking interactions, events, form submissions, and clicks. Below are the common use cases and how to set them up in GTM:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Track_Form_Submissions_on_AMP\"><\/span><strong>Track Form Submissions on AMP:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To track form submissions on AMP pages, you can use the <code>&lt;amp-analytics&gt;<\/code> tag configured to capture form submissions.<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">amp-analytics<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"googleanalytics\"<\/span>&gt;<\/span><br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"application\/json\"<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n    {<br \/>\n      <span class=\"hljs-string\">\"vars\"<\/span>: {<br \/>\n        <span class=\"hljs-string\">\"account\"<\/span>: <span class=\"hljs-string\">\"UA-XXXXXX-X\"<\/span><br \/>\n      },<br \/>\n      <span class=\"hljs-string\">\"triggers\"<\/span>: {<br \/>\n        <span class=\"hljs-string\">\"submitForm\"<\/span>: {<br \/>\n          <span class=\"hljs-string\">\"on\"<\/span>: <span class=\"hljs-string\">\"submit\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"selector\"<\/span>: <span class=\"hljs-string\">\"form\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"request\"<\/span>: <span class=\"hljs-string\">\"event\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"vars\"<\/span>: {<br \/>\n            <span class=\"hljs-string\">\"eventCategory\"<\/span>: <span class=\"hljs-string\">\"Form\"<\/span>,<br \/>\n            <span class=\"hljs-string\">\"eventAction\"<\/span>: <span class=\"hljs-string\">\"Submit\"<\/span>,<br \/>\n            <span class=\"hljs-string\">\"eventLabel\"<\/span>: <span class=\"hljs-string\">\"Contact Form\"<\/span><br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">amp-analytics<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p>This setup tracks form submissions and sends an event to Google Analytics with the category &#8220;Form,&#8221; action &#8220;Submit,&#8221; and label &#8220;Contact Form.&#8221;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Track_Clicks_on_AMP\"><\/span><strong>Track Clicks on AMP:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To track user clicks on buttons, links, or other elements in AMP, you can create an <code>&lt;amp-analytics&gt;<\/code> trigger for clicks.<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">amp-analytics<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"googleanalytics\"<\/span>&gt;<\/span><br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"application\/json\"<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n    {<br \/>\n      <span class=\"hljs-string\">\"vars\"<\/span>: {<br \/>\n        <span class=\"hljs-string\">\"account\"<\/span>: <span class=\"hljs-string\">\"UA-XXXXXX-X\"<\/span><br \/>\n      },<br \/>\n      <span class=\"hljs-string\">\"triggers\"<\/span>: {<br \/>\n        <span class=\"hljs-string\">\"trackClicks\"<\/span>: {<br \/>\n          <span class=\"hljs-string\">\"on\"<\/span>: <span class=\"hljs-string\">\"click\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"selector\"<\/span>: <span class=\"hljs-string\">\".cta-button\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"request\"<\/span>: <span class=\"hljs-string\">\"event\"<\/span>,<br \/>\n          <span class=\"hljs-string\">\"vars\"<\/span>: {<br \/>\n            <span class=\"hljs-string\">\"eventCategory\"<\/span>: <span class=\"hljs-string\">\"Button\"<\/span>,<br \/>\n            <span class=\"hljs-string\">\"eventAction\"<\/span>: <span class=\"hljs-string\">\"Click\"<\/span>,<br \/>\n            <span class=\"hljs-string\">\"eventLabel\"<\/span>: <span class=\"hljs-string\">\"CTA Button\"<\/span><br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">amp-analytics<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"5_Test_and_Debug_AMP_Tags\"><\/span><strong>5. Test and Debug AMP Tags<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before you publish your AMP tags, it is crucial to test and debug the configuration to ensure everything is working as expected.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Steps_to_test_your_AMP_tags\"><\/span>Steps to test your AMP tags:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li><strong>Use Google Tag Manager\u2019s Preview Mode:<\/strong>\n<ul>\n<li>Enable <strong>Preview Mode<\/strong> in GTM to test and debug your AMP tags. It lets you preview changes without making them live.<\/li>\n<li>Visit your AMP pages in a browser with the GTM preview mode enabled and check that the AMP tags are firing correctly.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Use Google\u2019s AMP Validation Tool:<\/strong>\n<ul>\n<li>Use <a target=\"_new\" rel=\"noopener\">Google\u2019s AMP Validator<\/a> to ensure your AMP pages are valid and compliant with AMP requirements.<\/li>\n<li>Make sure that the <code>&lt;amp-analytics&gt;<\/code> elements are correctly configured and firing.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Use Google Analytics Real-Time Reports:<\/strong>\n<ul>\n<li>You can also check Google Analytics real-time reports to verify that your pageviews, events, or interactions are being tracked properly.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"6_Publish_Your_Container\"><\/span><strong>6. Publish Your Container<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>After confirming that all AMP tracking works as expected in Preview Mode and testing, you can publish the container in GTM to make the changes live.<\/p>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Setting up AMP tracking with Google Tag Manager is a straightforward process, but it requires careful consideration of the AMP framework\u2019s restrictions and how analytics tags should be configured. By using <code>&lt;amp-analytics&gt;<\/code> and configuring Google Tag Manager to handle AMP tags appropriately, you can track pageviews, events, and interactions on your AMP pages, just like you would on a regular website. Remember to thoroughly test and validate your AMP pages to ensure that your tracking is functioning correctly before going live.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setting up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager (GTM) allows you to track user interactions on your AMP pages, similar to how&#8230;<\/p>\n","protected":false},"author":214,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-10417","post","type-post","status-publish","format-standard","hentry","category-digital-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager - CEOweb Ltd. Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"Setting up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager (GTM) allows you to track user interactions on your AMP pages, similar to how...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-06T22:43:18+00:00\" \/>\n<meta name=\"author\" content=\"Emmanuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emmanuel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/\",\"name\":\"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-06T22:43:18+00:00\",\"dateModified\":\"2024-11-06T22:43:18+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\",\"url\":\"https:\/\/ceowebltd.com\/blog\/\",\"name\":\"CEOweb Ltd. Blog\",\"description\":\"Guest Posting - Digital Marketing &amp; Web Services\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\",\"name\":\"Emmanuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"caption\":\"Emmanuel\"},\"url\":\"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager - CEOweb Ltd. Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/","og_locale":"en_US","og_type":"article","og_title":"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager - CEOweb Ltd. Blog","og_description":"Setting up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager (GTM) allows you to track user interactions on your AMP pages, similar to how...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-06T22:43:18+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/","name":"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-06T22:43:18+00:00","dateModified":"2024-11-06T22:43:18+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-amp-accelerated-mobile-pages-tracking-with-google-tag-manager-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/ceowebltd.com\/blog\/#website","url":"https:\/\/ceowebltd.com\/blog\/","name":"CEOweb Ltd. Blog","description":"Guest Posting - Digital Marketing &amp; Web Services","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f","name":"Emmanuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","caption":"Emmanuel"},"url":"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/"}]}},"_links":{"self":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/comments?post=10417"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10417\/revisions"}],"predecessor-version":[{"id":10418,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10417\/revisions\/10418"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}