Google AMP: análisis
El análisis de amplificador es un componente de amplificador que se utiliza para rastrear datos en una página. Toda la interacción del usuario en la página se puede registrar y guardar para analizar los datos con el fin de realizar mejoras adicionales o con fines comerciales.
Para trabajar con el componente amp-analytics, debemos agregar el siguiente script dentro de la sección principal:
<script async custom-element = "amp-analytics"
src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>Para registrar los eventos utilizados en amp-analytics, podemos utilizar un proveedor externo o también podemos tener un sistema de seguimiento interno.
Ejemplo de amp-analytics con el proveedor de GoogleAnalytics:
<amp-analytics type = googleanalytics>
<script type = application/json>{
"requests": {
"pageview": "${eventId}"
},
"vars": {
"account": "UA-44450152-1"
},
"triggers": {
"trackPageview" : {
"on": "visible",
"request": "pageview",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>Ejemplo de amp-analytics usando comscore vendor
<amp-analytics type = comscore>
<script type = application/json>
{"vars": {"c2":"7922264"}}
</script>
</amp-analytics>Ejemplo de amp-analytics usando chartbeat vendor
<amp-analytics type = chartbeat>
<script type = application/json>{
"vars": {
"uid": "230",
"domain": "dummyurl.com",
"sections": "us",
"authors": "Hello World"
}
}</script>
</amp-analytics>La lista detallada de proveedores está disponible aquí .
A continuación, se muestra un ejemplo práctico sobre cómo utilizar el proveedor de análisis interno:
Ejemplo
<!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>Cuando se accede a la página en el navegador, el rastreador se activará para la vista de página. Se puede ver en la pestaña de la red de Google como se muestra a continuación.
También puede activar el evento amp-analytics cuando un elemento en particular está visible en la página. Aquí se muestra un ejemplo de trabajo para el mismo:
Ejemplo
<!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>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-video controls
id = "videoplayer"
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png"
autoplay>
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
<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",
"visibilitySpec": {
"selector": "#videoplayer",
"visiblePercentageMin": 20,
"totalTimeMin": 2000,
"continuousTimeMin": 200
},
"vars": {
"eventId": "video"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>Salida
El componente Amp-analytics requiere que se pase un objeto json a la etiqueta de script. El formato del json es el siguiente:
{
"requests": {
request-name: request-value,
...
},
"vars": {
var-name: var-value,
...
},
"extraUrlParams": {
extraurlparam-name: extraurlparam-value,
...
},
"triggers": {
trigger-name: trigger-object,
...
},
"transport": {
"beacon": *boolean*,
"xhrpost": *boolean*,
"image": *boolean*,
}
}Todos los objetos especificados anteriormente no son obligatorios para pasar a amp-analytics. Si está utilizando un proveedor externo, el proveedor tendrá su formato y el usuario deberá pasar los datos de esa manera.
Entendamos cada uno de los objetos en detalle:
Peticiones
El objeto de solicitudes tiene una URL que se utiliza para activarse cuando se cumplen las condiciones. Aquí se muestra un ejemplo de objeto de solicitudes:
"requests": {
"request-name": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},El nombre de la solicitud se especificará en el objeto desencadenante y se debe usar el mismo nombre para él.
Vars
Todas las variables que se utilizarán en el objeto de solicitud se especifican en el objeto vars.
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"vars": {
"eventId": "video"
}Parámetros de URL adicionales
En este objeto se puede definir cualquier parámetro adicional que se agregue a la URL de la solicitud como cadena de consulta. Observe el siguiente ejemplo
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}&x=1&y=2&z=3"
},
"vars": {
"eventId": "video"
},
"extraUrlParams": {
"x": "1",
"y": "2",
"z": "3"
}Disparadores
Este objeto le dirá cuándo debe activarse la URL de solicitud. Los pares clave-valor que están disponibles dentro del objeto desencadenante son los que se indican a continuación:
on- Debes mencionar el evento para ser escuchado. Los valores disponibles paraonson render-start, ini-load, click, scroll, timer, visible, hidden, user-error, access- * y video- *
request- Este es el nombre de la solicitud. Esto tiene que coincidir con el nombre de la solicitud en el objeto de solicitudes .
vars - Este es un objeto con variables clave-valor definidas para usarse dentro del objeto desencadenante o para anular el clave-valor vars definido.
selector - Muestra los detalles del elemento en el que se establece el disparador.
scrollSpec - Esto tendrá detalles del disparador de desplazamiento.
timerSpec - Este tendrá detalles del tiempo a dar.
videoSpec - Esto tendrá detalles para ser invocados para un video.
Aquí hay un ejemplo en el que hemos agregado amp-video. Amp-analytics activará el rastreador cuando el elemento de video esté disponible en la página, al menos un 20% visible en la página, el video tenga que reproducirse al menos durante 2 segundos y se vea de forma continua durante 200 ms. Cuando se cumplen todas estas condiciones, solo se dispara el rastreador. Los detalles se muestran a continuación:
Para agregar las condiciones sobre la visibilidad del elemento y otras condiciones, como que el elemento debe ser visible al menos en un 20%, el video debe reproducirse durante 2 segundos, todas estas condiciones deben especificarse dentro del visibilitySpec como se muestra a continuación -
<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",
"visibilitySpec": {
"selector": "#videoplayer",
"visiblePercentageMin": 20,
"totalTimeMin": 2000,
"continuousTimeMin": 200
},
"vars": {
"eventId": "video"
}
}
}
}
</script>
</amp-analytics>videoSpecle permite definir las condiciones en función de las cuales desea activar el disparo del rastreador. Las condiciones se enumeran aquí:
waitFor
Esta propiedad se utiliza para que el disparador de visibilidad espere cierto caso antes de disparar. Las opciones disponibles para waitFor sonnone, ini-load y render-start. De forma predeterminada, el valor de waitFor es ini-load.
reportWhen
Esta propiedad se utiliza para que el disparador de visibilidad espere cierto caso antes de disparar. El valor admitido es documentExit. No puede usarreportWhen y repeat propiedad juntos por dentro visibilitySpec
continuousTimeMin and continuousTimeMax
Esta propiedad indica que el rastreador de visibilidad para disparar necesita que el elemento esté en la ventana gráfica continuamente entre continuousTimeMin y continuousTimeMax. Si no se especifica continousTimeMin, se establecerá de forma predeterminada en 0. El valor se especifica en milisegundos.
totalTimeMin and totalTimeMin
Esta propiedad indica que el rastreador de visibilidad para disparar necesita que el elemento esté en la ventana gráfica durante un tiempo total entre totalTimeMin y totalTimeMin. Si no se especifica totalTimeMin, el valor predeterminado será 0. El valor se especifica en milisegundos.
visiblePercentageMin and visiblePercentageMax
Esta propiedad indica que el rastreador de visibilidad para disparar necesita que el elemento sea visible dentro de la ventana gráfica entre el porcentaje asignado a visiblePercetageMin y visiblePercentageMax. Los valores predeterminados paravisiblePercentageMin es 0 y 100 para visibilePercentageMaxAmbos tienen valores 0 que el disparador de visibilidad se disparará cuando el elemento no sea visible y si ambos tienen 100, se disparará cuando el elemento esté completamente visible.
Repeat
Si se establece en verdadero, el disparador se activará cada vez que se cumplan las condiciones de visibilidadSpec. De forma predeterminada, el valor de repetición es falso. No se puede utilizar junto con la propiedad reportWhen.
Aquí se muestra un ejemplo de activador de clic:
<!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>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
<style amp-custom>
a {
color: blue;
}
</style>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<a>Click Here</a>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "clickonlink"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>Salida
Al hacer clic en el enlace, el evento se activará como se muestra a continuación:
