הגדרת התג ל-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

ההטמעה של gtag.js ב-AMP משתמשת במסגרת 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"
    }
  }
}

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

שליחת מאפיינים ופרמטרים מותאמים אישית באמצעות Google Analytics

כדי לשלוח מאפיינים ומדדים מותאמים אישית אל Google Analytics מדפי AMP באמצעות התג gtag.js, אפשר להשתמש במאפיין extraUrlParams בהגדרות הטריגר ב-JSON‏ <amp-analytics>. פרמטרים מותאמים אישית ב-Google Analytics נשלחים כפרמטרים של אירועים.

  • משתמשים בקידומת ep. לפרמטרים של אירועים עם ערכי מחרוזת.
  • משתמשים בקידומת epn. לפרמטרים של אירועים עם ערכים מספריים.

לפני השליחה, צריך לוודא שהמאפיינים והמדדים המותאמים אישית האלה רשומים בנכס ב-Google Analytics.

דוגמה: פרמטרים מותאמים אישית עם צפייה בדף

ההגדרה הזו שולחת מאפיין מותאם אישית my_custom_dimension ומדד מותאם אישית my_page_score עם הצפייה הראשונית בדף:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

דוגמה: פרמטרים מותאמים אישית עם אירוע מסוג קליק

ההגדרה הזו שולחת פרמטרים מותאמים אישית כשלוחצים על רכיב עם המזהה myButton:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

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

פתרון בעיות

אפשר להשתמש ב-validator.amp.dev כדי לאמת את הגדרת התיוג, או לוודא באופן ידני שהערך של cid עקבי בכל הדומיינים. כדי לעשות את זה, צריך:

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

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

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

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

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