Aprender a insertar amp-analytics


amp-analytics


El elemento amp-analytics se puede utilizar para medir la actividad de su sitio web en AMP. Actualmente, amp-analytics soporta cuatro tipos diferentes de eventos:

- Vista de pagina
- Clics de anclaje
- Minutero
- Desplazamiento
- Cambios en el carrusel AMP

Este ejemplo muestra qué eventos se pueden medir y cómo se pueden configurar. Para obtener una visión completa de todas las opciones y parámetros disponibles, eche un vistazo a la documentación oficial.

Agregar

Importe el componente amp-analytics justo después de la apertura <head>


<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Necesitamos agregar amp-iframe para integrar un panel de análisis.


<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Vamos a usar un punto final de análisis de demostración para demostrar lo que se puede realizar con amp-analytics. El panel está incrustado a través de amp-iframe y muestra los datos recibidos por el punto final de análisis en tiempo real. Debe ser visible en la esquina inferior derecha.


Ejemplo




  



<amp-iframe class="fixed-dashboard ampstart-card m1"
  width="180"
  height="180"
  layout="fixed"
  sandbox="allow-scripts allow-same-origin"
  frameborder="0"
  src="https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/embed?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample">
  <amp-img src="/img/pixel-white.png"
    layout="fixed-height"
    height="350"
    width="auto"
    placeholder></amp-img>
</amp-iframe>

Vista de pagina

Esta es una simple configuración de amp-analytics para disparar una sola solicitud cuando la página se vuelve visible. Observe cómo eventId una variable en la petición y el valor concreto en el bloque vars.

Importante: amp-analytics debe configurarse en el cuerpo del documento.


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>

Este es un seguimiento de visualización más sofisticado. Este ejemplo desencadena una solicitud de análisis cuando un elemento específico se vuelve visible. El elemento se especifica mediante el id y debe ser un elemento AMP (amp-img, amp-iframe, amp-ad, ...).


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#cat-image-id",
            "visiblePercentageMin": 20,
            "totalTimeMin": 500,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "catview"
          }
        }
      }
    }
  </script>
</amp-analytics>

Esta imagen activará una solicitud de análisis, si al menos el 20% de ella es visible durante 500 ms con un tiempo mínimo de 200 ms de visibilidad continua.


Ejemplo






<amp-img id="cat-image-id"
  src="/img/cat-looking-up-300x200.jpg"
  width="300"
  height="200"
  attribution="visualhunt"
  alt="a cat"
  layout="responsive"></amp-img>

Clics de anclaje

Las interacciones de los usuarios también pueden ser rastreadas. Esta configuración realizará un seguimiento de los clics en cualquier vínculo de anclaje en la página.


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickOnAnyAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Pruébelo haciendo clic en uno de los enlaces.


Ejemplo






<ul>
  <li>
    <a>a link</a>
  </li>
  <li>
    <a>another link</a>
  </li>
</ul>

También es posible activar eventos de clic sólo para enlaces específicos. Seleccione elementos específicos para el seguimiento especificando un identificador de selector. Este ejemplo sólo realiza un seguimiento de los clics en anclas con id anchor-id.


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "#anchor-id",
          "request": "event",
          "vars": {
            "eventId": "clickOnSpecialAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Sólo uno de estos vínculos activará el evento clickOnSpecialAnchor


Ejemplo






<ul>
  <li>
    <a id="anchor-id">a special link</a>.</li>
  <li>
    <a id="another-anchor-id">a not so special link</a>.</li>
</ul>

Eventos de desplazamiento

Utilice eventos de desplazamiento para activar una solicitud bajo ciertas condiciones cuando se desplaza la página.


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
          },
          "request": "event",
          "vars": {
            "eventId": "scroll"
          }
        }
      }
    }
  </script>
</amp-analytics>

Minutero

Los eventos del temporizador se activan en el intervalo especificado.


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 10,
            "maxTimerLength": 600
          },
          "request": "event",
          "vars": {
            "eventId": "timer"
          }
        }
      }
    }
  </script>
</amp-analytics>

Seguimiento de carrusel en AMP

Es posible realizar un seguimiento de eventos del amp-carrusel con amp-analytics (esto funciona sólo para type="slides" ). A continuación un ejemplo de carrusel:


Ejemplo




  
Slide 1

  
Slide 2

  
Slide 3





<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides">
  <div class="slide"
    data-slide-id="slide1">Slide 1</div>
  <div class="slide"
    data-slide-id="slide2">Slide 2</div>
  <div class="slide">Slide 3</div>
</amp-carousel>

Puede utilizar fromSlide y toSlide. El valor se toma del atributo data-slide-id cuando está presente, de lo contrario representa el índice de la diapositiva (a partir de 0).

El evento amp-carousel-change se emite cuando hay algún cambio en la diapositiva que está actualmente visible:


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselChange": {
          "on": "amp-carousel-change",
          "request": "event",
          "vars": {
            "eventId": "carousel-change-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

El siguiente evento amp-carousel-next se emite cuando hay un desplazamiento a la siguiente diapositiva:


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselNext": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-next-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

El evento amp-carousel-next se emite cuando hay un desplazamiento a la diapositiva anterior:


Ejemplo




  



<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselPrev": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-prev-${fromSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>



Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: