הוספת Analytics לדפי AMP

Accelerated Mobile Pages (AMP) היא פלטפורמה שמשמשת לבניית דפי אינטרנט להצגת תוכן סטטי שפועל במהירות. טכנולוגיית ה-AMP כוללת רכיב <amp-analytics> שמאפשר למדוד אינטראקציות של משתמשים, וכוללת תמיכה מובנית ב-Google Analytics.

הגדרה בסיסית למדידת צפיות בדפים

כדי ליצור התקנה בסיסית של Google Analytics בדף AMP, צריך להעתיק את קטע הקוד הזה ולהחליף את <GA_MEASUREMENT_ID> במזהה Google Tag. איפה מופיע מזהה Google Tag.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

שליחת נתונים ליעדים מרובים

אפשר לשלוח נתונים למספר יעדים באמצעות אותו תג <amp-analytics>. פשוט מוסיפים את מזהה המדידה החדש <GA_MEASUREMENT_ID_NEW> לפקודה config.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

איך זה עובד

הרכיב <amp-analytics> הוא רכיב AMP מורחב ומופעל באופן מפורש כ-custom-element בתג סקריפט.

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

בלוק הרכיבים <amp-analytics> מוגדר להפעלת תמיכה במוצרי מדידה של Google. מגדירים את המאפיין type עבור <amp-analytics> כ-"gtag" (כדי להפעיל תמיכה ב-gtag.js) ואת המאפיין data-credentials כ-"include" (כדי להפעיל קובצי cookie).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

טכנולוגיית AMP לא מאפשרת שימוש ב-JavaScript מעבר לספריות המאושרות שלה. ההגדרה מתבצעת באמצעות JSON. נכס gtag_id עם <GA_MEASUREMENT_ID> חוקי יתווסף לבלוק vars, ומתחתיו נכס config עם <GA_MEASUREMENT_ID>: {} יתווסף כערך.

מדידת אירועים

כדי למדוד אירועים בדפי AMP יש להשתמש ב-triggers עם ערכים מוגדרים. המאפיינים הבאים משמשים להגדרה של טריגר:

  • selector: סלקטור ב-CSS לציון רכיב יעד.
  • on: מציין את סוג האירוע.
  • vars: צריך לציין את סוג האירוע ב-event_name ולהוסיף עוד פרמטרים לפי הצורך.

הדוגמה הזו ממחישה איך להגדיר אירוע בסיסי ב-Google Analytics. יוצרים טריגר בשם "button", שיופעל כשמשתמש ילחץ על רכיב עם ערך המזהה "the-button". טריגר זה ישלח ל-Google Analytics את הערך event_name של "login" ואת הערך method של "Google":

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

אירועים ב-Google Analytics הם קטגוריה של אירועים ספציפיים ל-Google Analytics שמשמשים בדרך כלל ליצירת דוחות על קמפיינים. אפשר לציין את הערכים האלה בבלוק המשתנים עם הפרמטרים event_category, event_label ו-value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

במסמכי התיעוד בנושא amp-analytics מפורט מידע נוסף על הגדרת טריגרים.

שינוי של פרמטרים

כדי לשנות את הפרמטרים שמוגדרים כברירת מחדל ב-Google Analytics או להוסיף פרמטרים חדשים, צריך להוסיף את הערכים הרצויים לקטע parameter בבלוק config. הדוגמה הזו מבטלת את ערכי ברירת המחדל של צפיות בדף ואירועים עבור page_title ו-page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

הפונקציה לקישור בין דומיינים מאפשרת מדידה של שני אתרים קשורים או יותר בדומיינים נפרדים כאתר אחד. ציון הדומיינים שצריך לקשר לנכס "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

בדפי AMP שבהם מוגדר Google Analytics, האפשרות לקשר לדומיין הקנוני ממטמון ה-AMP מופעלת כברירת מחדל. כדי להשבית את היכולת של Google Analytics לקשר תנועה מהדומיין, מוסיפים "linker": "false" לפרמטרים של config:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

מהירות האתר עבור Universal Analytics

Google Analytics מוגדר לאסוף באופן אוטומטי נתונים על מהירות האתר עבור חלק קטן מתנועת האתר. אפשר לשנות את תדירות הדגימה כדי לאסוף יותר או פחות נתונים. כדי להגדיר את קצב הדגימה ל-100%, צריך להוסיף את הקוד המודגש להגדרה:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

כדי להפסיק את האיסוף של נתוני מהירות האתר, משתמשים בקוד המודגש:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

תנועה מסוג AMP לעומת תנועה שאינה AMP

כברירת מחדל, תנועת AMP משתמשת במזהי Client-ID שונים מאלה של תנועה באינטרנט. דפי AMP נטענים מהר יותר ומציגים דפוסי תנועה שונים מאלה של דפי אינטרנט רגילים. בדרך כלל, כתוצאה מכך יתקבלו מדדים שונים בין דפי AMP ותנועה שאינה AMP.

שימוש בנכס נפרד למדידת תנועת AMP מאפשר ניתוח טוב יותר של מדדים וקבלת תמונה מדויקת יותר של התנועה. כדי להבחין בין תנועה שמקורה ב-AMP לבין תנועה שאינה AMP אם אתם צריכים להשתמש בנכס אחד:

  • שימוש במאפיין מקור נתונים או במאפיין מותאם אישית (Universal Analytics).
  • אתם יכולים להשתמש בפרמטר מותאם אישית של אירוע (Google Analytics 4).

ניפוי באגים בהגדרה

אפשר להשתמש בכלי התיקוף של AMP כדי לזהות אם דף אינטרנט לא עומד בדרישות של מפרט AMP HTML. כדי להפעיל את כלי האימות, צריך להוסיף את #development=1 לכתובת ה-URL של דף.

התוסף amp-analytics מספק הודעות אזהרה ושגיאה כדי לעזור בניפוי באגים ובפתרון בעיות בהגדרות. כדי להציג הודעות שגיאה שתועדו במסוף של דפדפן האינטרנט, צריך להוסיף את #log=1 לכתובת ה-URL של הדף.

דוגמה מלאה

בדוגמה הזו מוצג דף AMP מלא עם לחצן יחיד בדף. ההגדרה הזו תשלח ל-Google Analytics נתונים רגילים של צפיות בדפים ואירועי "לחיצה על לחצן":

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>