Add meta tag to variable list in story ads

ampproject · Jan 27, 2022 · 6ae0d69 · 6ae0d69
1 parent 66aa670
commit 6ae0d69
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 4 deletions.
diff --git a/examples/amp-story/fake-ad.html b/examples/amp-story/fake-ad.html
@@ -6,6 +6,7 @@
     <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
     <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
     <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
     <title>My Story</title>
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -28,6 +29,48 @@
   </head>
 
   <body>
+    <amp-analytics>
+      <script type="application/json">
+        {
+          "transport": {
+            "beacon": false,
+            "xhrpost": false,
+            "image": true
+          },
+          "requests": {
+            "endpoint": "https://www.cool.example",
+            "base": "${endpoint}?id=${adId}&zx=${timestamp}"
+          },
+          "triggers": {
+            "storyAdView": {
+              "on": "story-ad-view",
+              "request": "base",
+              "extraUrlParams": {"amp_stads": "view", "type": "${METATAG_AD_amp-cta-type}"}
+            },
+            "storyAdSwipe": {
+              "on": "story-ad-swipe",
+              "request": "base",
+              "extraUrlParams": {"amp_stads": "swipe"}
+            },
+            "storyAdClick": {
+              "on": "story-ad-click",
+              "request": "base",
+              "extraUrlParams": {"amp_stads": "click"}
+            },
+            "storyAdExit": {
+              "on": "story-ad-exit",
+              "request": "base",
+              "extraUrlParams": {"amp_stads": "exit"}
+            },
+            "storyAdDestroy": {
+              "on": "story-ad-discard",
+              "request": "base",
+              "extraUrlParams": {"amp_stads": "discard"}
+            }
+          }
+        }
+      </script>
+    </amp-analytics>
     <amp-story
       title="Amp-story-doubleclick"
       publisher="The AMP Team"

diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-page.js b/extensions/amp-story-auto-ads/0.1/story-ad-page.js
@@ -2,6 +2,7 @@ import {CommonSignals_Enum} from '#core/constants/common-signals';
 import {
   createElementWithAttributes,
   isJsonScriptTag,
+  iterateCursor,
   toggleAttribute,
 } from '#core/dom';
 import {elementByTag} from '#core/dom/query';
@@ -27,6 +28,7 @@ import {
   A4AVarNames,
   START_CTA_ANIMATION_ATTR,
   createCta,
+  getAllStoryAdMetadataFromDoc,
   getStoryAdMetadataFromDoc,
   getStoryAdMetadataFromElement,
   maybeCreateAttribution,
@@ -265,14 +267,22 @@ export class StoryAdPage {
           this.localizationService_
         ) || uiMetadata[A4AVarNames.CTA_TYPE];
 
-      // Store the cta-type as an accesible var for any further pings.
-      this.analytics_.then((analytics) =>
+      this.analytics_.then((analytics) => {
+        // Store the cta-type as an accesible var for any further pings.
         analytics.setVar(
           this.index_, // adIndex
           AnalyticsVars.CTA_TYPE,
           uiMetadata[A4AVarNames.CTA_TYPE]
-        )
-      );
+        );
+
+        // Set meta tag based variables.
+        const metaTags = getAllStoryAdMetadataFromDoc(
+          this.adDoc_ ?? this.adElement_
+        );
+        for (const [key, value] of Object.entries(metaTags)) {
+          analytics.setVar(this.index_, `STORY_AD_META_${key}`, value);
+        }
+      });
 
       if (
         (this.adChoicesIcon_ = maybeCreateAttribution(

diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-ui.js b/extensions/amp-story-auto-ads/0.1/story-ad-ui.js
@@ -88,6 +88,24 @@ export function getStoryAdMetadataFromDoc(doc) {
   return vars;
 }
 
+/**
+ * Returns an object conntaining all meta tags (name=>value)
+ * @param {!Document} doc
+ * @return {!Object}
+ */
+export function getAllStoryAdMetadataFromDoc(doc) {
+  const metaTags = doc.querySelectorAll('meta[name]');
+  const result = map();
+  iterateCursor(metaTags, (tag) => {
+    const {content, name} = tag;
+    // If the meta tag name is not alphanumberical, we would ignore it.
+    if (/^[a-zA-Z0-9\-_]+$/.test(name)) {
+      result[name] = content;
+    }
+  });
+  return result;
+}
+
 /**
  * Gets story ad UI metadata from the <amp-ad> element.
  * @param {!Element} adElement