AMP Project - Google Analytics - Content Grouping amp-analytics code

Question

I am trying to assign content grouping variable to my Google Analytics code in my AMP markup.

My AMP analytics code:

<amp-analytics type="googleanalytics" id="analyticsgoogle1">
    <script type="application/json">
    {
        "vars": {
            "account": "UA-XXXXXXXX-X"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        }
    }
    </script>
</amp-analytics>

My regular Google analytics code:

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXXX-X', 'auto');
    ga('set', 'contentGroup1', 'My Category');
    ga('set', 'contentGroup2', 'My Author Type');
    ga('set', 'contentGroup3', 'My Author Name');
    ga('send', 'pageview');
</script>

I know it isn't listed in the documentation, but I am looking for something like this to possibly work so that my AMP pages can be tracked the same way as my regular pages.

Possible AMP Project Google Analytics Code with Content Grouping:

<amp-analytics type="googleanalytics" id="analyticsgoogle1">
<script type="application/json">
{
    "vars": {
        "account": "UA-XXXXXXXX-X"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
            "vars": {
                "contentGroup1": "My Category",
                "contentGroup2": "My Author Type",
                "contentGroup3": "My Author Name"
            }
        }
    }
}
</script></amp-analytics>

I do not see the content grouping variables when to look at the documentation for Variables supported in amp-analytics: https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md

Here is the documentation on amp-analytics code: https://developers.google.com/analytics/devguides/collection/amp-analytics/

Answer 1

I made a working solution. Actually it's quite simple. Same notes for the code below.

cg1 = contentGroup1, cg2 = contentGroup2

Details about Measurement protocol

IMPORTANT NOTE: Use throttling in your browser if you want to see your real requests to GA. In other case you will see redirect chain from GA instead of your real request. Very annoying.

<amp-analytics type="googleanalytics" id="ga1">
    <script type="application/json">
        {
            "extraUrlParams" : {
                "cd4": "AMP"
                <?php if($this->tracking_group_config['group'] === 'contentGroup1'):?>
                ,"cg1": "<?=$this->tracking_group_config['type']?>"
                <?php elseif($this->tracking_group_config['group'] === 'contentGroup2'): ?>
                ,"cg2": "<?=$this->tracking_group_config['type']?>"
                <?php endif; ?>
            },
            "vars": {
                "account": "[Your GA account ID here]"
            },
            "triggers": {
                "pageviewCustom": {
                    "on": "visible",
                    "request": "pageview"
                }
            }
        }
    </script>
</amp-analytics>

Answer 2

Using gtag, this code will work:

  <amp-analytics type="gtag" data-credentials="include">
    <script type="application/json">
    {
      "vars": {
        "gtag_id": "UA-XXXXXXXX-YY",
        "config": {
          "UA-XXXXXXXX-YY": {
            "groups": "default",
            "content_group1": "my value",
            "content_group3": "my other value"
          }
        }
      }
    }
    </script>
  </amp-analytics>

Also you can debug it by using Chrome Dev Tools under Network tab:

Hope it helps!