AMP

حالات الاستخدام

يقدم هذا الدليل مجموعة من حالات الاستخدام الشائعة لتتبع تفاعل المستخدم:

هل تريد إضافة حالة استخدام؟ أحطنا علمًا.

يمكنك أيضًا المساهمة بحالات الاستخدام الخاصة بك، انظر كيفية المساهمة.

تتبع مشاهدات الصفحة

تعرّف على كيفية تتبع مشاهدات الصفحة باستخدام amp-pixel وamp-analytics.

باستخدام amp-pixel

أرسل بيانات مشاهدة الصفحة إلى عنوان URL محدّد باستخدام amp-pixel:

<amp-pixel src="https://foo.com/pixel?"></amp-pixel>

باستخدام amp-analytics - لا مورّد

أرسل بيانات مشاهدة الصفحة إلى عنوان URL محدّد باستخدام amp-analytics:

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

باستخدام amp-analytics - googleanalytics

أرسل بيانات مشاهدة الصفحة إلى Google Analytics (انظر أيضًا تتبع الصفحة في Google Analytics):

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

تتبع النقرات على الصفحة

تعرّف على كيفية تتبع النقرات على الصفحة باستخدام amp-analytics، وإرسال بيانات الحدث إلى عنوان URL محدّد، وإلى Google Analytics.

إرسال البيانات إلى عنوان URL محدّد

يستخدم النموذج التالي السمة selector لإرسال حدث click إلى عنوان URL المحدّد كلما نقر مستخدم على رابط (<a href>):

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  }
}
</script>
</amp-analytics>

إرسال البيانات إلى Google Analytics

يستخدم النموذج التالي السمة selector لـ trigger لإرسال حدث click إلى Google Analytics عند النقر على عنصر معين (انظر أيضًا تتبع حدث AMP في Google Analytics):

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

تتبع التمرير

تتبع التمرير عبر الصفحة باستخدام amp-analytics. يستخدم النموذج التالي السمة scrollspec لإرسال حدث scroll إلى عنوان URL المحدّد عند التمرير عبر الصفحة رأسيًا بنسبة 25%، و50%، و90%. يتم تنشيط الحدث كذلك عند التمرير عبر الصفحة أفقيًا إلى نسبة 90% من عرض scroll:

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "scrollPings": {
      "on": "scroll",
      "scrollSpec": {
        "verticalBoundaries": [25, 50, 90],
        "horizontalBoundaries": [90]
      }
    }
  }
}
</script>
</amp-analytics>

تتبع التفاعلات الاجتماعية

تعرّف على كيفية تتبع التفاعلات الاجتماعية باستخدام amp-analytics، وإرسال بيانات الحدث إلى عنوان URL محدّد، وإلى Google Analytics.

إرسال البيانات إلى عنوان URL محدّد

يستخدم النموذج التالي السمة selector لإرسال حدث click إلى عنوان URL المحدّد كلما نقر مستخدم على تغريدة ("#رابط_التغريدة):

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackClickOnTwitterLink": {
      "on": "click",
      "selector": "#tweet-link",
      "request": "event",
      "vars": {
        "eventId": "43",
        "eventLabel": "clicked on a tweet link"
      }
    }
  }
}
</script>
</amp-analytics>

إرسال البيانات إلى Google Analytics

يستخدم النموذج التالي السمة selector لـ trigger لإرسال حدث عند النقر على زر إجراءات اجتماعية معيّن (انظر أيضًا تتبع التفاعلات الاجتماعية في Google Analytics):

<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y" // Replace with your property ID.
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>