Google AMP - niestandardowy JavaScript
W poprzednich rozdziałach przestudiowaliśmy wiele elementów wzmacniacza. Widzieliśmy również, że aby każdy komponent działał, musimy dodać plik javascript.
Na przykład dla amp-iframe dodany skrypt wygląda następująco -
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
Mamy asyncdodany do tagu script. Jest to standard dla wzmacniaczy, ponieważ ładują one wszystkie pliki javascript asynchronicznie. Tam jestcustom-element dodany atrybut zawierający nazwę komponentu, do którego jest używany.
Aby użyć dowolnego komponentu amp, jeśli nie jest częścią podstawowego pliku javascript amp, należy dodać skrypt, jak pokazano powyżej.
Jesteśmy przyzwyczajeni do pisania dużej ilości kodu javascript na stronach, a także dołączamy plik javascript za pomocą tagu script.
Jak możemy to zrobić we wzmacniaczu? Dlatego AMP nie zezwala na zapisywanie żadnego kodu skryptu ani na ładowanie tagu skryptu zewnętrznie.
Amp ma swój własny komponent do obsługi zadania, które ma być wykonywane przez dodatkowy skrypt, który jest dodawany na stronie. Odbywa się to zasadniczo ze względu na wydajność, aby szybciej ładować zawartość strony i nie opóźniać renderowania w języku JavaScript ani wprowadzać żadnych zmian w DOM.
To jest specyfikacja podana przez AMP na oficjalnej stronie dla tagów skryptów -
Zabronione, chyba że typ to application / ld + json. (W razie potrzeby można dodać inne wartości, które nie są wykonywalne). Wyjątkiem jest obowiązkowy tag skryptu do ładowania środowiska wykonawczego AMP i tagi skryptu w celu załadowania rozszerzonych komponentów.
Działający przykład, w którym możemy użyć application/ld+jsonwewnątrz naszych stron wzmacniaczy jest pokazana tutaj. Zwróć uwagę, że używamy tagu script z typem = ”application / ld + json” dla komponentu amp-analytics do uruchomienia modułu śledzącego.
Podobnie, możemy użyć tagu script z type = ”application / ld + json” na innych komponentach wzmacniacza, gdziekolwiek jest to wymagane.
Przykład
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>amp-analytics</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-analytics"
src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
<link rel = "canonical" href = "ampanalytics.html">
<meta name = "viewport" content = "width=device-width,
minimum-scale = 1,initial-scale = 1">
<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>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>
Gdy strona zostanie wyświetlona w przeglądarce, moduł śledzący zostanie uruchomiony w celu wyświetlenia strony. Można to zobaczyć na karcie sieci Google, jak pokazano poniżej.