Cambiar la primera impresión es muy difícil. Y no solo estoy hablando de personas. Las tecnologías también suelen convertirse en rehenes de la primera impresión: su primera versión. Y luego, a pesar de años de desarrollo, nuevas oportunidades y la eliminación de viejos defectos, en la conciencia de masas, la tecnología sigue siendo muy imperfecta, su primera versión. Aquellos que no están tratando de lidiar con este tipo de sesgo cognitivo solo pueden ver los éxitos de los competidores que usan tecnologías familiares en nuevos escenarios, con una pregunta tonta: "¿Qué podría haber sucedido?".
El ejemplo más sorprendente de una tecnología que ha avanzado mucho en comparación con lo que era al principio, en mi opinión, es AMP - Accelerated Mobile Pages. Muchos desarrolladores perciben AMP como una forma de poner el contenido estático de su sitio (artículos, noticias, notas, etc.) en el caché de Google para que cuando se abran desde la búsqueda, este contenido se cargue instantáneamente (el ícono del rayo en los resultados de búsqueda indica una alta velocidad de carga de las páginas AMP: )). Naturalmente, si necesita lograr tal resultado, entonces con AMP será muy fácil de hacer. Pero AMP es mucho más que tecnología para trabajar con contenido estático o el caché de Google. AMP se ha utilizado durante mucho tiempo como una biblioteca de uso general basada en componentes web para crear páginas dinámicas rápidas e incluso sitios web completos que los usuarios obtienen tanto de búsqueda como de otras fuentes, incluidas las visitas directas. Desde este punto de vista, AMP puede equipararse con Polymer, React o Angular. Naturalmente, teniendo en cuenta el hecho de que AMP está diseñado para sitios simples (lo que sea que signifique) donde el énfasis principal está en el contenido y el componente dinámico es limitado.
También me gustaría señalar que, a pesar del nombre de Accelerated Mobile Pages, AMP se puede usar para crear cualquier sitio, tanto de escritorio como móvil. El sitio web del proyecto: ampproject.org es un gran ejemplo de lo que AMP puede hacer para el escritorio.
En este artículo, consideraremos la tecnología AMP en sí, hablaremos sobre sus capacidades y limitaciones, y también haremos que AMP aterrice para una tienda en línea con soporte para cargar, mostrar, filtrar y buscar productos. Este ejemplo no fue elegido por casualidad, porque el comercio electrónico es la segunda área más popular después de los sitios de noticias donde AMP se usa más activamente.
Puede ver la página de destino terminada en el GIF de arriba.
AMP está dedicado a muchos artículos, entre los que puede encontrar muy crítico. La mayoría de estos artículos se centran en un lado de la tecnología AMP, es decir, el caché. Después de todo, si la página del sitio se almacena en caché, y luego, cuando se hace clic desde una búsqueda, no se abren directamente, entonces esto inevitablemente impone restricciones. Los usuarios parecen recorrer su sitio. Surge una pregunta sacramental: ¿quién se beneficia de esto? ¿Puede ser más rentable dar siempre contenido directamente? A juzgar por el hecho de que los editores de contenido utilizan activamente AMP, la mayoría de ellos son definitivamente rentables para usar el caché: sus sitios de búsqueda se abren instantáneamente. El principal problema con el caché es que en la barra de direcciones del navegador el usuario no ve la dirección del sitio en sí, que alberga páginas AMP, por ejemplo www.vedomosti.ru , sino la dirección en el caché, en este caso será así: www.google.com/ amp / s / www.vedomosti.ru .
Este comportamiento no es una forma maliciosa de sacar a los usuarios de su sitio. Es más bien un problema técnico que no podría resolverse de otra manera. Los desarrolladores de AMP están trabajando activamente en una solución a este problema. El nuevo estándar de Web Packaging ayudará. Gracias a ello, cuando se carga en la memoria caché, los datos se firman con el certificado del dominio de origen y, como resultado, cuando se muestran las páginas AMP de la memoria caché, el dominio original y no la dirección en la memoria caché se mostrarán en la barra de direcciones.
Por otro lado, el problema de caché, si es relevante, es principalmente para los editores de contenido. Si el activo principal son artículos o noticias, para cualquier editor es importante cómo y a quién se muestran. Y el hecho de que los editores inicialmente desconfiaran de AMP es comprensible. De ahí mucha controversia sobre este tema. Por otro lado, el comercio electrónico es un escenario completamente diferente. Para el propietario de una tienda en línea, un sitio para vender entradas para conciertos, un banco que acepta solicitudes de tarjetas de crédito o un salón de belleza que registra a los clientes, es fundamental que los clientes vengan y compren. La conversión es importante. Y si hay una tecnología que ayudará a que los sitios sean más rápidos, aumentando así la conversión, entonces, usar esta tecnología, por supuesto, será beneficioso.
Amplificador
¿Qué hace que los sitios web sean rápidos? ¡Los haces rápidos, desarrolladores! No hay magia, los sitios rápidos son rápidos porque sus desarrolladores se preocupan por el rendimiento y trabajan en ellos para mejorar los sitios. Hay un conjunto de mejores prácticas y trucos para crear sitios que se cargan rápidamente y funcionan rápido. Por ejemplo, es mejor cargar imágenes pesadas solo en el momento en que el usuario se desplaza hacia ellas, y no inmediatamente al abrir la página. También vale la pena limitar el número total de recursos descargados, utilizando scripts asíncronos, etc. El único problema es que todas estas prácticas deben recordarse, tenerse en cuenta y monitorear constantemente su aplicación. Esto es complicado Siempre existe la tentación de hacer algo que no estará en línea con las mejores prácticas, pero será más fácil de implementar.
AMP es una tecnología con la que es fácil hacer lo correcto (y finalmente obtener un sitio rápido). Y hacer un sitio usando AMP lento es difícil. Esto se logra a través de un conjunto de restricciones, así como un validador que verifica estas restricciones. Si la página se valida, se puede almacenar en caché. Es decir, AMP lo restringe deliberadamente, y esta es la idea principal de esta tecnología, pero a cambio se gana la confianza de que está utilizando las mejores prácticas. No necesita ser un experto en optimización para obtener un buen resultado con AMP. Las mejores prácticas se utilizan de forma predeterminada y se minimiza la posibilidad de errores.
Al mismo tiempo, AMP no es otro tipo de HTML, es una biblioteca ordinaria en la que no hay nada que no sea accesible para los creadores de otras bibliotecas. Con AMP, utiliza un marcado HTML regular, así como estilos CSS. Puede crear un sitio completo en AMP si es lo suficientemente simple (un ejemplo típico es todo tipo de páginas de destino), y si las capacidades de AMP se vuelven insuficientes, siempre puede agregar páginas que no sean AMP.
Por otro lado, las optimizaciones utilizadas en AMP se pueden hacer sin AMP, pero esto requerirá mucho esfuerzo y tiempo. En cualquier caso, incluso si por alguna razón decide no usar AMP, tiene sentido al menos estudiar cómo funciona esta biblioteca y qué hace para aplicar estos enfoques a sus sitios. Puede parecer que la promoción de AMP es la promoción de una biblioteca en particular, y no el rendimiento de los sitios como tales. Pero esto no es así: tener un sitio web productivo es mucho más importante que usar una u otra biblioteca o marco.
Una vez más, me gustaría señalar que todas las restricciones impuestas por AMP no son de naturaleza ideológica, sino que son causadas por consideraciones utilitarias: le permiten crear sitios rápidos. El punto Si en el futuro hay una manera, sin sacrificar el rendimiento, para eliminar una u otra limitación, entonces, por supuesto, se eliminará.
¿Cuáles son las limitaciones de AMP? La limitación más importante es que las páginas no pueden contener código arbitrario de JavaScript. Para lo único que puede usar JavaScript limitado es para el enlace de datos. Además, no puede conectar archivos externos de JavaScript y CSS. Hay excepciones: esta es la biblioteca AMP en sí, así como una lista de componentes aprobados (puede participar en el desarrollo de AMP y crear sus propios componentes). Todos los CSS deben estar en la página misma, y su volumen está limitado a 50 kilobytes. Además, no puede usar parte de las etiquetas HTML, como <img />; en su lugar, usan los componentes web incluidos en el paquete AMP. Por ejemplo, el componente <amp-img /> se usa en lugar de <img />. Esto es necesario para que AMP pueda controlar la carga de recursos. También hay ligeras restricciones de CSS causadas por consideraciones de rendimiento (no puede usar el modificador! Importante y animaciones no aceleradas por GPU). En realidad eso es todo. AMP proporciona un rico conjunto de componentes, que elimina en parte la incapacidad de escribir código JavaScript arbitrario. El conjunto de componentes incluye, por ejemplo, amp-date-picker , amp-sidebar , amp-user-notify , amp-facebook-like , amp-access , con el que puede implementar el soporte de autenticación, y muchos, muchos otros. Y en casos muy extremos, cuando no hay otra salida, puede usar iframes con contenido que no sea AMP.
Antes de comenzar a trabajar con AMP, le recomiendo que estudie la documentación en el sitio web del proyecto: ampproject.org . Además, es útil mirar ampbyexample.com , que contiene excelentes ejemplos, la mayoría de los cuales se pueden usar prácticamente sin cambios en proyectos reales. Si necesita plantillas listas para usar, están disponibles en ampstart.com .
Creando AMP Landing
Creemos una página de destino para una tienda de bicicletas en línea con una lista de productos, filtros y búsquedas. Nuestros productos se cargarán dinámicamente. Para fines de capacitación, no utilizaremos plantillas listas para usar, pero haremos todo desde cero. El código del proyecto se puede encontrar en GitHub: https://github.com/spugachev/amp-article
El repositorio contiene un back-end en Node.js, así como páginas AMP ubicadas en la carpeta pública. Para iniciar el proyecto, debe clonar el repositorio y ejecutar los siguientes comandos en la carpeta del proyecto (Node.js debe estar instalado).
>> npm install >> npm start
Plantilla de página
Crea una página de AMP mínimo. Su código se presenta a continuación. En el proyecto que descargó de GitHub, la página principal public / index.html se deja en blanco intencionalmente, y la usaremos para escribir código.
<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title> </title> <link rel="canonical" href="http://amp-bike-shop.com/index.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> <style amp-custom> </style> </head> <body> <h2> AMP !</h2> </body> </html>
Lo primero que llama la atención en el ejemplo anterior: el marcado HTML contiene una indicación explícita de que se trata de una página AMP. Esto se logra agregando un símbolo de rayo a la etiqueta html (desafortunadamente el símbolo de Habr corta un símbolo de rayo), o agregando la palabra "amplificador" allí también. Sin esa indicación, la página no se validará y no se agregará al caché de Google durante la indexación.
A continuación, debe conectar la biblioteca de JavaScript de AMP:
<script async src="https://cdn.ampproject.org/v0.js"></script>
También debe especificar la dirección canónica de la página. Si hay una versión de la página que no es AMP, se indica su dirección. De lo contrario, se indica la dirección de la página AMP.
<link rel="canonical" href="http://amp-bike-shop.com/index.html">
Además, debe agregar una metaetiqueta para escalar, así como estilos CSS de plantilla. Estos estilos no se pueden cambiar. Son necesarios para que al cargar la página, pero antes de cargar la biblioteca AMP de JavaScript, el contenido no estilizado no parpadee en la pantalla. Si por alguna razón la biblioteca no se carga, el contenido se mostrará en cualquier caso después de ocho segundos.
Coloque la imagen usando el componente amp-image en la parte superior de la página. Al establecer layout = "responsive", la imagen se estirará al ancho completo del contenedor.
<amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive"> </amp-img>
En lo sucesivo, no daré estilos CSS, y se pueden encontrar en el repositorio del proyecto en GitHub. Entonces ...
Ejecute el proyecto y abra la página principal en un navegador. Si el parámetro # desarrollo = 1 se agrega a la dirección de la página, la página se validará automáticamente y se mostrará información al respecto en la consola del navegador. Para el mismo propósito, puede usar la extensión de Chrome llamada AMP Validator .
Por ejemplo, si en lugar de <amp-img /> se usó una etiqueta <img /> normal, dicha página no pasaría la validación, que se indicaría con un mensaje correspondiente.
Cargando y mostrando datos
Ahora tenemos una página básica de AMP con una imagen para llamar la atención y el nombre de la tienda. Ahora es el momento de descargar la lista de productos del servidor y mostrarla en la página. El proyecto respaldado ya incluye un servicio que devuelve una lista de productos (en este caso, bicicletas) en formato JSON.
GET /api/bikes [ { "id":1, "img":"img/01.jpg", "title":" ", "price":"28500", "available":false }, { "id":2, "img":"img/02.jpg", "title":" ", "price":"14750", "available":true }, { "id":3, "img":"img/03.jpg", "title":" ", "price":"31200", "available":true }, … ]
Dado que AMP no le permite escribir código JavaScript arbitrario, todas las acciones, incluida la carga de datos, se establecen en un estilo declarativo. Necesitamos conectar varios componentes a la página que cargarán y mostrarán datos, y también nos permitirán usar plantillas. Dado que estos serán componentes AMP estándar, podemos conectarlos. Necesitaremos los componentes:
- amp-bind para soportar el enlace de datos,
- amp-bigote para trabajar con plantillas en formato bigote
- así como una lista de amplificadores para trabajar con una lista que cargará y mostrará datos.
Conecte los archivos necesarios en el encabezado de página:
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
Agregue el componente de lista a la página:
<amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" items="."> <div placeholder>...</div> <div fallback> .</div> <template type="amp-mustache"> <div class="card" style="height: 340px;"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}}<p> </p>{{/available}} {{^available}}<p> </p>{{/available}} <p>{{price}} </p> </div> </template> </amp-list>
La propiedad src se establece para el componente, que determina de dónde se tomarán los datos (en nuestro caso, se ejecutará una solicitud GET en "// localhost: 3000 / api / bikes"), así como la propiedad items, que le permite buscar una matriz de elementos para la lista dentro de la respuesta JSON del servidor Dado que la respuesta en sí misma es una matriz, el valor de la propiedad ítems indica la raíz de la respuesta.
A continuación, definimos un apéndice que se mostrará durante la carga de datos, así como un apéndice en caso de error. Pero lo más interesante es, por supuesto, la plantilla de elementos de la lista. El formato de la plantilla es muy simple, creo que la sintaxis de las plantillas de bigote no requiere una explicación adicional.
Agregue el código anterior, actualice la página y mire la lista de productos que se muestran en la página. Con un marcado simple y sin escribir código JavaScript, cargamos los datos y mostramos los datos en la página (usando una lista y una plantilla).
Filtrado de datos
Cada página de AMP tiene un estado. Se puede considerar como un objeto con una jerarquía de propiedades. El estado de la página se puede cambiar en los controladores de eventos utilizando la función AMP.setState.
Agregue un filtro que le permita mostrar solo las bicicletas que están disponibles. Para hacer esto, colocaremos una casilla de verificación en la página, al hacer clic en la cual, cambiaremos el estado de la página asignando el valor a la variable Disponible (según si la casilla está seleccionada o no). El nombre de la variable es arbitrario, podría llamarse cualquier cosa. Tenga en cuenta que AMP implementa su propia forma de manejar eventos. Puede manejar varios eventos a la vez, y para cada evento puede tener varias acciones.
<label> <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })"/> </label>
El mecanismo de enlace de datos le permite enlazar variables de estado de página con valores de propiedad en marcado HTML. Para que la biblioteca AMP realice dicho enlace, el nombre de la propiedad que debería recibir el valor debe estar entre corchetes - []. Por ejemplo, agregaremos o eliminaremos la clase CSS 'activa' (esta es una clase no estándar y la establecemos nosotros) dependiendo del valor de la única variable Disponible.
<label [class]="onlyAvailable? 'active' : ''" >
En el modo de desarrollo (# desarrollo = 1), el estado de la página se puede mostrar en la consola del navegador utilizando la función AMP.printState ();
Ahora agregue la lista de productos al estado de la página. Para hacer esto, utilizamos un componente de estado de amplificador por separado. El componente descargará datos de la misma fuente que la lista de amplificadores , pero no se volverá a cargar, ya que AMP controla la carga de datos y evita solicitudes innecesarias. Además, agregamos una macro que, al cambiar el valor de la variable onlyAvailable, filtrará la lista de productos.
<amp-state id="bikes" src="//localhost:3000/api/bikes"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro>
Ahora usaremos la lista filtrada como fuente de datos para el componente amp-list . Para hacer esto, conectamos la propiedad src del componente con la macro filterBikes. Y también conecta la propiedad de la altura del componente con el número de elementos. Esto es necesario, ya que la altura del componente de lista de amplificadores no se ajustará automáticamente al número de elementos. En este ejemplo, el número 340 es la altura de la tarjeta del producto, y 16 es la sangría arriba y abajo.
<amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items=".">
Tenga en cuenta que la carga de datos explícitos configurando la propiedad src = "// localhost: 3000 / api / bikes" permanece. No puedes eliminarlo. Al cargar una página AMP por razones de rendimiento, el enlace de datos no se realiza automáticamente. Se ejecutará solo después de las acciones del usuario, como hacer clic en la casilla de verificación.
Abra la página resultante y verifique que el filtrado funcione correctamente.
Buscar
La implementación de búsqueda es similar a la implementación de filtrado. Agregue un campo de texto y, al ingresar la prueba, asignaremos al estado de consulta variable de la página el valor ingresado en el campo.
<input type="text" placeholder="" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" />
Backend en nuestro proyecto apoya la búsqueda. Para buscar productos, debe agregar el parámetro "q" a la solicitud GET que ya conocemos. No nos detendremos en la implementación del lado del servidor, sino que veremos cómo realizar una nueva solicitud al servidor cuando cambie el estado de la página.
Realizamos el enlace de datos para el parámetro src del componente amp-state , que ya utilizamos para obtener los datos iniciales para el filtrado. Cuando cambie el estado de página de la variable de consulta, se ejecutará una nueva consulta de búsqueda.
<amp-state id="bikes" src="//localhost:3000/api/bikes" [src]="query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state>
Eso es todo, ahora la búsqueda está trabajando en la página. Además, una nueva consulta de búsqueda será una fuente de datos para el filtrado, que también seguirá funcionando correctamente. El código de cuerpo completo de la página se presenta a continuación.
<body> <amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive"> </amp-img> <div class="content"> <h2> AMP !</h2> <amp-state id="bikes" src="//localhost:3000/api/bikes" [src]= "query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro> <input type="text" placeholder="" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" /> <label [class]="onlyAvailable? 'active' : ''" > <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })" /> </label> <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items="."> <div placeholder>...</div> <div fallback> .</div> <template type="amp-mustache"> <div class="card"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}} <p> </p>{{/available}} {{^available}} <p> </p>{{/available}} <p>{{price}} </p> </div> </template> </amp-list> </div> </body>
En pocas palabras: creamos una página AMP interactiva con soporte para cargar y vincular datos. Completamos la instalación y cambiamos el estado de la página, aprendimos a trabajar con plantillas y también respondemos a los comentarios de los usuarios. Como puede ver, AMP facilita el desarrollo de páginas dinámicas interactivas, incluso a pesar de las serias limitaciones en el uso de JavaScript. Intenta decir que AMP es para estadísticas;). ¡Sabemos que AMP puede hacer mucho más!
Caja de herramientas de AMP
Al cargar páginas AMP en el caché y enviarlas desde el caché, Google realiza muchas optimizaciones. Cuando regala páginas AMP de su sitio directamente, entonces, por supuesto, no se realizan optimizaciones adicionales. Si desea acelerar el retorno directo de las páginas AMP, use la biblioteca AMP Toolbox . Proporciona middleware incluido para Express, por lo que, por lo general, usar AMP Toolbox con Node.js es cuestión de agregar algunas líneas de código. Al mismo tiempo, la velocidad de carga de la página aumenta.
Pasos adicionales
Analítica
Si no recopila estadísticas sobre el uso de su sitio, entonces no tiene sentido realizar ningún cambio; no tendrá una idea clara de si los cambios fueron positivos, negativos o neutrales. ¿Cómo puede saber si la experiencia del usuario ha mejorado con la implementación de AMP, si no tiene ninguna información sobre la experiencia del usuario? Por lo tanto, la introducción de análisis es vital.
AMP admite dos componentes principales para recopilar datos: amp-pixel para establecer un píxel simple y amp-analytics para soluciones de análisis más complejas. El componente amp-experiment también le permite realizar pruebas A / B en páginas AMP.
Con amp-analytics, puede conectar Google Analytics, Yandex Metrics y otros proveedores (por ejemplo, Baidu Analytics).
Agregar análisis a una página es muy simple. Primero necesita conectar la biblioteca apropiada con el componente amp-analytics .
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Y luego coloque el componente en la página y configure los ajustes. Para Google Analytics, se verá así.
<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
Para Yandex Metrics, el código es muy similar.
<amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" } } </script> </amp-analytics>
Naturalmente, estos son los ajustes más mínimos. Para cualquier solución analítica, debe especificar en la configuración qué datos desea recopilar.
Cuando se usa el componente amp-analytics , hay un problema con el seguimiento de usuarios en páginas AMP y no AMP. Quiero que la identificación de usuario en todas partes sea la misma. Para un usuario que descarga su página del caché de Google y luego hace clic en los enlaces a su sitio directamente, desde el punto de vista de análisis, para ser considerado el mismo usuario. Para hacer esto, use la API de ID de cliente. Obtenga más información sobre qué configuraciones debe realizar en la Ayuda de Google Analytics .
Service Workers y PWA (Progressive Web Apps)
En el caso de sitios bastante complejos, así como sitios existentes, será difícil escribir o incluso reescribir todo en AMP. Por lo tanto, generalmente las páginas que los usuarios obtienen de fuentes externas (páginas de inicio de sesión) forman páginas AMP. Se abrirán rápidamente tanto desde el caché como directamente. Pero luego, cuando el usuario hace clic en el enlace de la página AMP, será llevado a su sitio principal. Y aquí es importante que el sitio principal al cargar desde la página AMP se cargue al instante. Esto se logra mediante el mecanismo de Trabajadores del Servicio. Cuando abre la página AMP, debe instalar el servicio de trabajo para el sitio principal, y el servicio de trabajo, a su vez, descargará y almacenará en caché los archivos necesarios. Gracias a esto, los enlaces a la página AMP se abrirán instantáneamente, ya que todo o casi todo lo que se necesita para abrir las siguientes páginas ya estará en la caché.
Para instalar el trabajador de servicio, use el componente amp-install-serviceworker . Se conecta de la misma manera que todos los demás componentes de AMP.
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
Un ejemplo de su uso se presenta a continuación.
<amp-install-serviceworker src="/sw.js" data-iframe-src="https://mydomain.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>
Si un usuario visita su sitio directamente, el componente instalará el trabajador de servicio especificado por el parámetro src. Pero en el caso de cargar la página AMP desde el caché, no podrá hacer esto, ya que está prohibido instalar trabajadores de servicio para otros dominios. Por lo tanto, debe crear una página en el sitio donde se ubicará el código de instalación del trabajador de servicio. Al cargar desde el caché, amp-install-serviceworker abrirá la página en un iframe y se instalará el trabajador del servicio.
PWA (Progressive Web Apps) es un enfoque sobre cómo construir aplicaciones web modernas que se acerquen a las nativas en función de la experiencia del usuario. El corazón de la PWA son los trabajadores de servicio. Uno puede encontrar la opinión de que AMP y PWA son, en cierta medida, competidores. De hecho, se complementan entre sí. PWA se enfoca en interacciones regulares a largo plazo y siempre que sea posible con los usuarios. Al mismo tiempo, AMP se concentra en la primera interacción cuando el usuario viene del exterior. PWA no mejora exactamente este aspecto: la primera interacción. Por lo tanto, muchos proyectos usan AMP como punto de entrada que transfiere al usuario a PWA. Y eso es muy razonable. Si no se supone que tenga interacciones de usuario regulares, largas o complejas, entonces puede sobrevivir con un AMP.
Conclusión
En este artículo, analizamos una aplicación de AMP, aunque en realidad hay muchos más escenarios interesantes. Por ejemplo, los anuncios AMPHTML son una excelente manera de crear anuncios que se cargan rápidamente. Después de todo, si los banners de carga lenta se colocan en páginas AMP que se abren instantáneamente, los usuarios probablemente no verán dichos anuncios. Sí, y en páginas normales: los anuncios de carga lenta molestan a los usuarios. Por lo tanto, es lógico hacer la publicidad en sí (creatividades publicitarias) utilizando AMP.
Los usuarios usan el contenido de manera diferente en dispositivos de escritorio y móviles. Por ejemplo, cuando leen desde un teléfono, los usuarios dejan de leer un artículo largo mucho antes que cuando lo leen desde el escritorio (¿y han leído hasta este punto? :)). El formato de las historias (historias) se ha vuelto cada vez más popular en dispositivos móviles, y las historias de AMP son solo la forma de hacer tales historias rápidamente y sin esfuerzo adicional.
Además, se está desarrollando una versión de AMP para correo electrónico (AMPHTML para correo electrónico), que le permitirá crear hermosos correos electrónicos interactivos utilizando AMP.
No olvide también que AMP puede usarse simplemente como un formato para insertar contenido en su sitio web. Por ejemplo, si necesita mostrar noticias, artículos o tarjetas de productos en una aplicación React o Angular, puede almacenarlos en formato AMP, precargarlos y luego mostrarlos instantáneamente en una aplicación web (o incluso en una aplicación nativa). No tiene que usar AMP para toda la página: el contenido de AMP también puede ser pequeñas piezas de contenido.
Con AMP, puede crear sitios completos, así como páginas individuales, pancartas, historias y usar AMP como un formato rápido y compacto para insertar contenido.
Sergey Pugachev, experto desarrollador de Google
PS. El artículo es una mirada personal a AMP y puede no coincidir con la opinión de Google o el empleador del autor;)