Google AMP - Analytics

Amp Analytics ist eine Amp-Komponente, mit der Daten auf einer Seite verfolgt werden. Die gesamte Benutzerinteraktion auf der Seite kann aufgezeichnet und gespeichert werden, um die Daten für weitere Verbesserungen oder Geschäftszwecke zu analysieren.

Um mit der Amp-Analytics-Komponente arbeiten zu können, müssen wir im Kopfbereich das folgende Skript hinzufügen:

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

Um die in der Amp-Analyse verwendeten Ereignisse aufzuzeichnen, können wir einen Drittanbieter verwenden oder über ein internes Tracking-System verfügen.

Beispiel für Amp-Analytics mit dem GoogleAnalytics-Anbieter -

<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>

Beispiel für Amp-Analytics mit Comscore Vendor

<amp-analytics type = comscore>
   <script type = application/json>
      {"vars": {"c2":"7922264"}}
   </script>
</amp-analytics>

Beispiel für Amp-Analytics mit Chartbeat-Anbieter

<amp-analytics type = chartbeat>
   <script type = application/json>{
      "vars": {
         "uid": "230",
         "domain": "dummyurl.com",
         "sections": "us",
         "authors": "Hello World"
      }
   }</script>
</amp-analytics>

Die detaillierte Liste der Anbieter finden Sie hier .

Im Folgenden finden Sie ein Arbeitsbeispiel für die Verwendung des internen Analytics-Anbieters.

Beispiel

<!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>

Wenn die Seite im Browser aufgerufen wird, wird der Tracker für den Seitenaufruf ausgelöst. Es kann auf der Registerkarte "Google-Netzwerk" angezeigt werden (siehe unten).

Sie können das Amp-Analytics-Ereignis auch auslösen, wenn ein bestimmtes Element auf der Seite sichtbar ist. Ein Arbeitsbeispiel dafür wird hier gezeigt -

Beispiel

<!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>

Ausgabe

Für die Amp-Analytics-Komponente muss ein JSON-Objekt an das Skript-Tag übergeben werden. Das Format des JSON ist wie folgt:

{
   "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*,
   }
}

Alle oben angegebenen Objekte müssen nicht an amp-analyse übergeben werden. Wenn Sie einen Drittanbieter verwenden, hat der Anbieter sein Format und der Benutzer muss die Daten auf diese Weise weitergeben.

Lassen Sie uns jedes Objekt im Detail verstehen -

Anfragen

Das Anforderungsobjekt verfügt über eine URL, die zum Auslösen verwendet wird, wenn die Bedingungen erfüllt sind. Ein Beispiel für ein Anforderungsobjekt wird hier gezeigt -

"requests": {
   "request-name": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},

Der Anforderungsname wird im Triggerobjekt angegeben und es muss derselbe Name dafür verwendet werden.

Vars

Alle im Anforderungsobjekt zu verwendenden Variablen werden im vars-Objekt angegeben.

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},
"vars": {
   "eventId": "video"
}

Zusätzliche URL-Parameter

In diesem Objekt können alle zusätzlichen Parameter definiert werden, die als Abfragezeichenfolge an die Anforderungs-URL angehängt werden sollen. Beachten Sie das folgende Beispiel

"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"
}

Löst aus

Dieses Objekt erkennt, wann die Anforderungs-URL ausgelöst werden muss. Die Schlüssel-Wert-Paare, die im Triggerobjekt verfügbar sind, sind wie folgt:

on- Sie sollten das Ereignis erwähnen, das angehört werden soll. Die verfügbaren Werte füronsind Render-Start, Ini-Load, Klicken, Scrollen, Timer, sichtbar, versteckt, Benutzerfehler, Zugriff- * und Video- *

request- Dies ist der Name der Anfrage. Dies muss mit dem Anforderungsnamen im Anforderungsobjekt übereinstimmen .

vars - Dies ist ein Objekt mit Schlüsselwertvariablen, die definiert sind, um innerhalb des Triggerobjekts verwendet zu werden oder um den definierten vars-Schlüsselwert zu überschreiben.

selector - Hier werden die Details des Elements angezeigt, auf das der Trigger gesetzt ist.

scrollSpec - Hier finden Sie Details zum Bildlaufauslöser.

timerSpec - Hier finden Sie Angaben zur angegebenen Zeit.

videoSpec - Hier werden Details für ein Video aufgerufen.

Hier ist ein Beispiel, in dem wir Amp-Video hinzugefügt haben. Amp-Analytics löst den Tracker aus, wenn das Videoelement auf der Seite verfügbar ist, mindestens 20% auf der Seite sichtbar sind, das Video mindestens 2 Sekunden lang abgespielt werden muss und 200 ms lang ununterbrochen angezeigt wird. Wenn alle diese Bedingungen erfüllt sind, wird nur der Tracker abgefeuert. Die Details sind unten gezeigt -

Um die Bedingungen für die Sichtbarkeit des Elements hinzuzufügen, müssen andere Bedingungen wie das Element mindestens 20% sichtbar sein. Das Video sollte 2 Sekunden lang abgespielt werden. Alle diese Bedingungen müssen innerhalb des Elements angegeben werden visibilitySpec wie unten gezeigt -

<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>

videoSpecMit dieser Option können Sie Bedingungen definieren, anhand derer Sie das Auslösen des Trackers auslösen möchten. Die Bedingungen sind hier aufgelistet -

waitFor

Diese Eigenschaft wird als Sichtbarkeitsauslöser verwendet, um vor dem Auslösen auf einen bestimmten Fall zu warten. Die für waitFor verfügbaren Optionen sindnone, ini-load und render-start. Standardmäßig ist der Wert für waitFor ini-load.

reportWhen

Diese Eigenschaft wird als Sichtbarkeitsauslöser verwendet, um vor dem Auslösen auf einen bestimmten Fall zu warten. Der unterstützte Wert ist documentExit. Sie können ihn nicht verwendenreportWhen und repeat Eigentum zusammen im Inneren visibilitySpec

continuousTimeMin and continuousTimeMax

Diese Eigenschaft gibt an, dass sich der Sichtbarkeits-Tracker, zwischen dem das Element ausgelöst werden soll, kontinuierlich im Ansichtsfenster befinden muss continuousTimeMin und continuousTimeMax. Wenn continuousTimeMin nicht angegeben ist, wird es standardmäßig auf 0 gesetzt. Der Wert wird in Millisekunden angegeben.

totalTimeMin and totalTimeMin

Diese Eigenschaft gibt an, dass sich der Sichtbarkeits-Tracker, der zum Auslösen des Elements benötigt wird, für eine Gesamtzeit zwischen dem Ansichtsfenster befinden muss totalTimeMin und totalTimeMin. Wenn totalTimeMin nicht angegeben ist, wird standardmäßig 0 verwendet. Der Wert wird in Millisekunden angegeben.

visiblePercentageMin and visiblePercentageMax

Diese Eigenschaft gibt an, dass der Sichtbarkeits-Tracker zum Auslösen des Elements das Element im Ansichtsfenster zwischen dem Prozentsatz, der sichtbaremPercetageMin zugewiesen ist, und sichtbarem ProzentsatzMax sichtbar sein muss. Die Standardwerte fürvisiblePercentageMin ist 0 und 100 für visibilePercentageMaxBeide haben Werte 0, als der Sichtbarkeitsauslöser ausgelöst wird, wenn das Element nicht sichtbar ist, und wenn beide 100 haben, wird er ausgelöst, wenn das Element vollständig sichtbar ist.

Repeat

Bei true wird der Trigger jedes Mal ausgelöst, wenn die Sichtbarkeitsspezifikationsbedingungen erfüllt sind. Standardmäßig ist der Wert für die Wiederholung falsch. Es kann nicht zusammen mit der Eigenschaft reportWhen verwendet werden.

Ein Beispiel für einen Klick-Trigger finden Sie hier -

<!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>

Ausgabe

Wenn Sie auf den Link klicken, wird das Ereignis wie unten gezeigt ausgelöst.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved