saikmadana/amp-script-usage.html

## amp-script-usage.html
<!DOCTYPE html>
<html amp lang="en-us">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="canonical" href="canonical-url.com" />
    <meta name="amp-experiments-opt-in" content="development">
    <meta name="amp-experiment-token"
        content="AAAAAFl7Im9yaWdpbiI6Imh0dHBzOi8vZGVtby5kaXZhbWkuY29tIiwiZXhwZXJpbWVudCI6ImFtcC1zY3JpcHQiLCJleHBpcmF0aW9uIjoxNTY3Mjk2MDAwMDAwfUdy4F8vo9Pg5dCcn1yhx6Yw+1QvAMUsM8O0tfwsmJdqsNCs19vv2BF9wON39MKwQrJ7cSwIvcRVGt9ZRsDfUTYhG+A4mdsxCKYmganSWML/DOE+09PuQ07KkmvCwgTCR/vmpf/gl7VrNd5Y5uwQjshCerkdcp5xAe9ITfXAXIIa7k9A7v4PNXu06nnz78iaMngovlsZXS6ydDW+s6yoXYBwO5RdC6vKcyD62b8gjxyRH7djAjOW+RBY827JnL6l1cu/8lcMjUBBqfClGc0dgKGV1h8IGl9sjDRiWO2VViRGFs8FYPW5UC4H69gcon/jQY2peaWoTqUhmFjs4TGOb0A=">
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script> <!-- cdn to amp -->
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script> <!-- cdn to amp-script -->
</head>
<body>
    <amp-script layout="container" src="https://url-to-deployed-js-file.js"> <!-- the js file should be in https -->
        <div class="amp-element"> <!-- click added for this element -->
            CLick me to test script working
        </div>
    </amp-script>
</body>
</html>

## url-to-deployed-js-file.js
var clickable = document.getElementsByClassName('amp-element')[0];
clickable.addEventListener('click', function() {
	console.log("click is working...");
});
	<!DOCTYPE html>
	<html amp lang="en-us">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<link rel="canonical" href="canonical-url.com" />
	<meta name="amp-experiments-opt-in" content="development">
	<meta name="amp-experiment-token"
	content="AAAAAFl7Im9yaWdpbiI6Imh0dHBzOi8vZGVtby5kaXZhbWkuY29tIiwiZXhwZXJpbWVudCI6ImFtcC1zY3JpcHQiLCJleHBpcmF0aW9uIjoxNTY3Mjk2MDAwMDAwfUdy4F8vo9Pg5dCcn1yhx6Yw+1QvAMUsM8O0tfwsmJdqsNCs19vv2BF9wON39MKwQrJ7cSwIvcRVGt9ZRsDfUTYhG+A4mdsxCKYmganSWML/DOE+09PuQ07KkmvCwgTCR/vmpf/gl7VrNd5Y5uwQjshCerkdcp5xAe9ITfXAXIIa7k9A7v4PNXu06nnz78iaMngovlsZXS6ydDW+s6yoXYBwO5RdC6vKcyD62b8gjxyRH7djAjOW+RBY827JnL6l1cu/8lcMjUBBqfClGc0dgKGV1h8IGl9sjDRiWO2VViRGFs8FYPW5UC4H69gcon/jQY2peaWoTqUhmFjs4TGOb0A=">
	<style amp-boilerplate>
	body {
	-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
	-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
	-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
	animation: -amp-start 8s steps(1, end) 0s 1 normal both
	}

	@-webkit-keyframes -amp-start {
	from {
	visibility: hidden
	}

	to {
	visibility: visible
	}
	}

	@-moz-keyframes -amp-start {
	from {
	visibility: hidden
	}

	to {
	visibility: visible
	}
	}

	@-ms-keyframes -amp-start {
	from {
	visibility: hidden
	}

	to {
	visibility: visible
	}
	}

	@-o-keyframes -amp-start {
	from {
	visibility: hidden
	}

	to {
	visibility: visible
	}
	}

	@keyframes -amp-start {
	from {
	visibility: hidden
	}

	to {
	visibility: visible
	}
	}
	</style>
	<noscript>
	<style amp-boilerplate>
	body {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none
	}
	</style>
	</noscript>
	<script async src="https://cdn.ampproject.org/v0.js"></script> <!-- cdn to amp -->
	<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script> <!-- cdn to amp-script -->
	</head>
	<body>
	<amp-script layout="container" src="https://url-to-deployed-js-file.js"> <!-- the js file should be in https -->
	<div class="amp-element"> <!-- click added for this element -->
	CLick me to test script working
	</div>
	</amp-script>
	</body>
	</html>
	var clickable = document.getElementsByClassName('amp-element')[0];
	clickable.addEventListener('click', function() {
	console.log("click is working...");
	});