How to add StatCounter code to AMP pages?

Default code does not work well on AMP pages and due to the presence of <script> tag, it can make the page not fit for AMP – Accelerated Mobile Pages Project by Google.

So to add the following StatCounter code with changed PROJECT_ID and SECURITY_CODE anywhere inside <body></body> tag of your AMP plugin’s header.php. Use plugin editor to edit the page.

<!-- BEGIN StatCounter CODE -->
<div id="statcounter">
<amp-pixel  src="https://c.statcounter.com/PROJECT_ID/0/SECURITY_CODE/1/" ></amp-pixel>
</div>
<!-- END StatCounter CODE -->

Check your original StatCounter code for PROJECT_ID and SECURITY_CODE which may look like:

<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=8155087; 
var sc_invisible=1; 
var sc_security="7d514e4e"; 
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript><div class="statcounter"><a title="web counter" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/8144086/0/7d212e4e/1/" alt="web counter"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->

Code is validated on AMP test page – https://search.google.com/test/amp