הגדרת התג ל-AMP

פרויקט Accelerated Mobile Pages (AMP) הוא פלטפורמת אינטרנט בקוד פתוח שעוזרת לשפר את הביצועים של תוכן האינטרנט. טכנולוגיית AMP כוללת תמיכה מובנית ב-Google Tag וב-Google Tag Manager. במדריך הזה מוסבר איך להגדיר את Google Analytics לדפי AMP.

התקנה

Google Tag מאפשר להתקין את Google Analytics, את Google Ads ומוצרים אחרים של Google בדפי AMP. Google Tag Manager מגדיר מאגר תגים של AMP ומאפשר ליצור הגדרות מתקדמות ולפרוס תגים של צד שלישי מהממשק של Tag Manager.

בוחרים את הפלטפורמה המועדפת באמצעות הלחצנים הבאים:

Google Tag

הטמעת ה-AMP של gtag.js מבוססת על amp-analytics framework כדי לאפשר לכם להטמיע ניתוח נתונים באתר ה-AMP שלכם. אפשר לשלוח נתונים מדפי AMP אל Google Ads, Google Analytics ומוצרים אחרים של Google מאותה הטמעה של gtag.js.

התקנה

כדי להגדיר את Google Tag (gtag.js) בדף AMP, קודם צריך לוודא שכללת את הרכיב amp-analytics בתג <head> בדף:

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

בשלב הבא, מוסיפים את Google Tag לדף ה-AMP כרכיב JSON בתוך התג <body> בדף. מחליפים את <TARGET_ID> במזהה התג של המוצרים (למשל, Google Ads, Google Analytics) שאליו תרצו לשלוח נתונים:

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

כדי להגדיר כמה מוצרים ב-Google Tag, אין צורך להתקין את כל התג מאותו מוצר. צריך להוסיף את מזהה היעד רק לפקודת config נפרדת.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

מידע נוסף זמין במסמכי התיעוד של amp-analytics.

טריגרים של אירוע

כדי לשלוח נתונים ספציפיים למוצרים, צריך להגדיר טריגרים על סמך אירועים כמו קליקים. טריגרים של gtag.js ב-AMP פועלים לפי אותם דפוסי JSON כמו amp-analytics הגדרות טריגר אחרות.

הדוגמה הזו מדגימה איך לשלוח אירוע click ל-Google Analytics. הערך selector הוא סלקטור ב-CSS שמאפשר לציין לאיזה רכיב מטרגטים. הערך on מציין את סוג האירוע, שבמקרה הזה הוא אירוע click. בקטע vars מציינים את סוג האירוע ב-event_name ומוסיפים עוד פרמטרים לפי הצורך.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

נוסף לאירועים המומלצים, אתם יכולים לציין אירועים מותאמים אישית משלכם.

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

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

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

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

דוגמה מלאה

דוגמת הקוד הזו ממחישה הדגמה פעילה מלאה של דף AMP שיוצר דף AMP יחיד ושולח אירוע button-click ל-Google Analytics כשמשתמש לוחץ על הלחצן. מחליפים את <TAG_ID> במזהה התג החוקי:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <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>

    <!-- 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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

פתרון בעיות

צריך להשתמש בכתובת amptagtest.appspot.com כדי לאמת את הגדרת התיוג. לחלופין, אפשר לוודא שהערך של cid עקבי בכל הדומיינים באמצעות הפעולות הבאות:

  • חשוב לנקות את קובצי ה-cookie או להשתמש במצב פרטי.
  • אם cid לא נמצא בקובץ cookie של Google Analytics, אפשר לראות אותו גם בכרטיסייה 'רשת' בדפדפן האינטרנט. מחפשים את collect request, והמטען הייעודי (payload) אמור להכיל את הערך cid.

  • אחרי ההעברה מ-CDN של Google לאתר הלקוח, יש להעביר את הערך cid והערך gclid באמצעות קישוט של כתובת URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • דף הנחיתה הסופי צריך להיות זהה לערך cid שמופיע בדף הנחיתה הראשוני.

  • חשוב להיזהר מהפניות אוטומטיות ומשינויים בדומיין בין דף הנחיתה הקנוני לבין דפי הנחיתה שאינם AMP.