הגדרת התג ל-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 כדי יכולת לבצע ניתוח נתונים באתר ה-AMP. הנתונים יכולים להיות נשלחים מדפי AMP אל Google Ads, אל Google Analytics ואל מוצרים אחרים של Google. מאותה הטמעה של gtag.js.

התקנה

כדי להגדיר את 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.

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

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

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

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