הפרויקט 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 שיוצר דף 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, ומטען הייעודי (payload) צריך להכיל ערך שלcid. אחרי שעוברים מדף ה-AMP לדומיין אחר באתר, צריך להעביר את הערכים של
cidו-gclidבאמצעות הוספת פרמטרים לכתובת ה-URL:**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**ערך ה-
cidבדף הנחיתה הסופי צריך להיות זהה לערך בדף הנחיתה הראשוני.היזהרו עם הפניות אוטומטיות ושינויים בדומיין בין הדף הקנוני לבין דפי נחיתה שהם לא AMP.