הוספת Analytics לדפי AMP

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

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

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

<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> הוא רכיב 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, ומתחתיו מופיע נכס תצורה עם <GA_MEASUREMENT_ID>: {}.

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

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

  • 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" לפרמטרים של התצורה:

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

מהירות האתר

מערכת 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 נטענים מהר יותר ומוצגים בהם דפוסי תנועה שונים מאלה של דפי אינטרנט רגילים, כלומר לעיתים קרובות תקבלו מדדים שונים בין תנועה ל-AMP ותנועה שאינה AMP.

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

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

ניפוי באגים בתצורה

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

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

השלמת הדוגמה

הדוגמה הזו מראה דף AMP מלא עם לחצן יחיד בדף. התצורה הזו תשלח נתונים רגילים של צפיות בדף ואירועי "button-click " אל 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>