הגדרת תגים ל-AMP

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

התקנה

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

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

Google Tag

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

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

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

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

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