✨🧪 Added CTA Migration page-outlink experiment

examples/amp-story/ads/app-install.html

@@ -12,6 +12,11 @@
   <meta name="amp4ads-vars-attribution-icon" content="/test/fixtures/e2e/amphtml-ads/resource/icon.png">
   <meta name="amp4ads-vars-attribution-url" content="https://www.google.com">
 
+  <meta name="amp4ads-vars-cta-accent-element" content="text">
+  <meta name="amp4ads-vars-cta-accent-color" content="#FF00FF">
+  <meta name="amp4ads-vars-cta-image" content="/examples/visual-tests/picsum.photos/image1068_300x169.jpg">
+  <meta name="amp4ads-vars-theme" content="custom">
+
   <style amp-custom>
     @font-face {
       font-family: "Poppins";

extensions/amp-story-auto-ads/0.1/story-ad-ui.js

@@ -1,6 +1,8 @@
 import {createElementWithAttributes, iterateCursor} from '#core/dom';
 import {dict, map} from '#core/types/object';
 
+import {isExperimentOn} from '#experiments';
+
 import {CSS as attributionCSS} from '../../../build/amp-story-auto-ads-attribution-0.1.css';
 import {CSS as ctaButtonCSS} from '../../../build/amp-story-auto-ads-cta-button-0.1.css';
 import {dev, user} from '../../../src/log';
@@ -38,6 +40,14 @@ export const A4AVarNames = {
   CTA_URL: 'cta-url',
 };
 
+/** @type {Array<string>} */
+export const PageOutlinkLayerVarNames = [
+  'cta-accent-color',
+  'cta-accent-element',
+  'cta-image',
+  'theme',
+];
+
 /** @enum {string} */
 const DataAttrs = {
   CTA_TYPE: 'data-vars-ctatype',
@@ -182,6 +192,63 @@ export function handleAttributionClick(win, href) {
   openWindowDialog(win, href, '_blank');
 }
 
+/**  Creates a page-outlink element, returns an anchor tag containing relevant data if successful
+ * @param {!Document} doc
+ * @param {!StoryAdUIMetadata} uiMetadata
+ * @param {!Element} container
+ * @return {?Element}
+ */
+function createPageOutlink_(doc, uiMetadata, container) {
+  const pageOutlink = doc.createElement('amp-story-page-outlink');
+  pageOutlink.setAttribute('layout', 'nodisplay');
+
+  const pageAnchorTag = doc.createElement('a');
+  pageAnchorTag.href = uiMetadata[A4AVarNames.CTA_URL];
+  pageAnchorTag.textContent = uiMetadata[A4AVarNames.CTA_TYPE];
+
+  pageOutlink.appendChild(pageAnchorTag);
+
+  for (const pageOutlinkLayerVarName of PageOutlinkLayerVarNames) {
+    if (uiMetadata[pageOutlinkLayerVarName]) {
+      pageOutlink.setAttribute(
+        pageOutlinkLayerVarName,
+        uiMetadata[pageOutlinkLayerVarName]
+      );
+    }
+  }
+
+  pageOutlink.className = 'i-amphtml-story-page-outlink-container';
+
+  container.appendChild(pageOutlink);
+  return container;
+}
+
+/** Creates a CTA layer, returns an anchor tag containing relevant data if successful
+ * @param {!Element} a
+ * @param {!Document} doc
+ * @param {!Element} container
+ * @return {?Element}
+ */
+function createCtaLayer_(a, doc, container) {
+  const ctaLayer = doc.createElement('amp-story-cta-layer');
+  ctaLayer.className = 'i-amphtml-cta-container';
+
+  const linkRoot = createElementWithAttributes(
+    doc,
+    'div',
+    dict({
+      'class': 'i-amphtml-story-ad-link-root',
+      'role': 'button',
+    })
+  );
+
+  createShadowRootWithStyle(linkRoot, a, ctaButtonCSS);
+
+  ctaLayer.appendChild(linkRoot);
+  container.appendChild(ctaLayer);
+  return a;
+}
+
 /**
  * @param {!Document} doc
  * @param {!./story-ad-button-text-fitter.ButtonTextFitter} buttonFitter
@@ -223,22 +290,10 @@ export function createCta(doc, buttonFitter, container, uiMetadata) {
       return null;
     }
 
-    const ctaLayer = doc.createElement('amp-story-cta-layer');
-    ctaLayer.className = 'i-amphtml-cta-container';
-
-    const linkRoot = createElementWithAttributes(
-      doc,
-      'div',
-      dict({
-        'class': 'i-amphtml-story-ad-link-root',
-        'role': 'button',
-      })
-    );
-
-    createShadowRootWithStyle(linkRoot, a, ctaButtonCSS);
-
-    ctaLayer.appendChild(linkRoot);
-    container.appendChild(ctaLayer);
-    return a;
+    if (isExperimentOn(doc.defaultView, 'amp-story-page-outlink')) {
+      return createPageOutlink_(doc, uiMetadata, container);
+    } else {
+      return createCtaLayer_(a, doc, container);
+    }
   });
 }

extensions/amp-story-auto-ads/0.1/test/test-story-ad-ui.js

@@ -1,3 +1,5 @@
+import {toggleExperiment} from '#experiments';
+
 import {ButtonTextFitter} from '../story-ad-button-text-fitter';
 import {
   A4AVarNames,
@@ -216,4 +218,156 @@ describes.realWin('story-ad-ui', {amp: true}, (env) => {
       });
     });
   });
+
+  describe('createCta page outlink custom element', () => {
+    let buttonFitter;
+
+    beforeEach(() => {
+      buttonFitter = new ButtonTextFitter(env.ampdoc);
+      toggleExperiment(env.win, 'amp-story-page-outlink', true, true);
+    });
+
+    it('returns the created anchor for the page outlink', () => {
+      const metadata = {
+        'cta-accent-color': '#FF00FF',
+        'cta-accent-element': 'text',
+        'cta-image':
+          '/examples/visual-tests/picsum.photos/image1068_300x169.jpg',
+        'theme': 'custom',
+        [A4AVarNames.CTA_TYPE]: 'SHOP',
+        [A4AVarNames.CTA_URL]: 'https://www.cats.com',
+      };
+      return createCta(
+        doc,
+        buttonFitter,
+        doc.body /* container */,
+        metadata
+      ).then((container) => {
+        expect(container).to.exist;
+        const containerElem = doc.querySelector(
+          '.i-amphtml-story-page-outlink-container'
+        );
+        expect(containerElem).to.exist;
+
+        expect(containerElem.getAttribute('cta-accent-color')).to.equal(
+          '#FF00FF'
+        );
+        expect(containerElem.getAttribute('cta-accent-element')).to.equal(
+          'text'
+        );
+        expect(containerElem.getAttribute('cta-image')).to.equal(
+          '/examples/visual-tests/picsum.photos/image1068_300x169.jpg'
+        );
+        expect(containerElem.getAttribute('theme')).to.equal('custom');
+        expect(containerElem.children[0].href).to.equal(
+          'https://www.cats.com/'
+        );
+        expect(containerElem.children[0].textContent).to.equal('SHOP');
+      });
+    });
+  });
+
+  describe('createCta page outlink light theme element', () => {
+    let buttonFitter;
+
+    beforeEach(() => {
+      buttonFitter = new ButtonTextFitter(env.ampdoc);
+      toggleExperiment(env.win, 'amp-story-page-outlink', true, true);
+    });
+
+    it('returns the created anchor for the page outlink', () => {
+      const metadata = {
+        'theme': 'light',
+        [A4AVarNames.CTA_TYPE]: 'SHOP',
+        [A4AVarNames.CTA_URL]: 'https://www.cats.com',
+      };
+      return createCta(
+        doc,
+        buttonFitter,
+        doc.body /* container */,
+        metadata
+      ).then((container) => {
+        expect(container).to.exist;
+        const containerElem = doc.querySelector(
+          '.i-amphtml-story-page-outlink-container'
+        );
+        expect(containerElem).to.exist;
+        expect(containerElem.getAttribute('theme')).to.equal('light');
+        expect(containerElem.children[0].href).to.equal(
+          'https://www.cats.com/'
+        );
+        expect(containerElem.children[0].textContent).to.equal('SHOP');
+      });
+    });
+  });
+
+  describe('createCta page outlink dark theme element', () => {
+    let buttonFitter;
+
+    beforeEach(() => {
+      buttonFitter = new ButtonTextFitter(env.ampdoc);
+      toggleExperiment(env.win, 'amp-story-page-outlink', true, true);
+    });
+
+    it('returns the created anchor for the page outlink', () => {
+      const metadata = {
+        'theme': 'dark',
+        [A4AVarNames.CTA_TYPE]: 'SHOP',
+        [A4AVarNames.CTA_URL]: 'https://www.cats.com',
+      };
+      return createCta(
+        doc,
+        buttonFitter,
+        doc.body /* container */,
+        metadata
+      ).then((container) => {
+        expect(container).to.exist;
+        const containerElem = doc.querySelector(
+          '.i-amphtml-story-page-outlink-container'
+        );
+        expect(containerElem).to.exist;
+        expect(containerElem.getAttribute('theme')).to.equal('dark');
+        expect(containerElem.children[0].href).to.equal(
+          'https://www.cats.com/'
+        );
+        expect(containerElem.children[0].textContent).to.equal('SHOP');
+      });
+    });
+  });
+
+  describe('createCta page outlink dark theme element with color and accent-element (should have no effect)', () => {
+    let buttonFitter;
+
+    beforeEach(() => {
+      buttonFitter = new ButtonTextFitter(env.ampdoc);
+      toggleExperiment(env.win, 'amp-story-page-outlink', true, true);
+    });
+
+    it('returns the created anchor for the page outlink', () => {
+      const metadata = {
+        'theme': 'dark',
+        'cta-accent-color': '#FF00FF',
+        'cta-accent-element': 'text',
+        [A4AVarNames.CTA_TYPE]: 'SHOP',
+        [A4AVarNames.CTA_URL]: 'https://www.cats.com',
+      };
+      return createCta(
+        doc,
+        buttonFitter,
+        doc.body /* container */,
+        metadata
+      ).then((container) => {
+        expect(container).to.exist;
+        const containerElem = doc.querySelector(
+          '.i-amphtml-story-page-outlink-container'
+        );
+        expect(containerElem).to.exist;
+        expect(containerElem.getAttribute('theme')).to.equal('dark');
+        expect(containerElem.children[0].href).to.equal(
+          'https://www.cats.com/'
+        );
+        expect(containerElem.children[0].textContent).to.equal('SHOP');
+      });
+    });
+  });
 });

extensions/amp-story/1.0/amp-story-page-attachment.js

@@ -339,14 +339,15 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
         .querySelector('amp-story-page-outlink')
         ?.querySelector('a');
 
-      const pageAttachmentChild = this.element.parentElement
-        ?.querySelector('.i-amphtml-story-page-open-attachment-host')
-        .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment');
-
       if (pageOutlinkChild) {
         pageOutlinkChild.click();
-      } else if (pageAttachmentChild) {
-        triggerClickFromLightDom(pageAttachmentChild, this.element);
+      } else {
+        const pageAttachmentChild = this.element.parentElement
+          ?.querySelector('.i-amphtml-story-page-open-attachment-host')
+          .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment');
+        if (pageAttachmentChild) {
+          triggerClickFromLightDom(pageAttachmentChild, this.element);
+        }
       }
     };
 

extensions/amp-story/1.0/amp-story-page.js

@@ -704,6 +704,16 @@ export class AmpStoryPage extends AMP.BaseElement {
 
   /** @return {!Promise} */
   beforeVisible() {
+    /*
+     * Note that this.renderOpenAttachmentUI_ is called twice,
+     * once in the layoutCallback, and once again in beforeVisible.
+     * This is to make sure that the page-outlink element is created and loaded properly
+     * and will display for the user(as the element may not be fully created / loaded during
+     * the beginning of the layout callback), the code will short circuit at the beginning
+     * of the function call if the element has not been created, so there are no almost drawbacks
+     * performance-wise to doing this operation. This fix was done to reduce developer code complexity.
+     */
+    this.renderOpenAttachmentUI_();
     return this.maybeApplyFirstAnimationFrameOrFinish();
   }
 

extensions/amp-story/1.0/test/test-amp-story-page.js

@@ -140,6 +140,13 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
     expect(spy).to.have.been.calledOnce;
   });
 
+  it('should call beforeVisible after layoutCallback resolves', async () => {
+    const spy = env.sandbox.spy(page, 'beforeVisible');
+    page.buildCallback();
+    await page.layoutCallback();
+    expect(spy).to.have.been.calledOnce;
+  });
+
   it('should mark page as loaded after media is loaded', async () => {
     const waitForMediaLayoutSpy = env.sandbox.spy(page, 'waitForMediaLayout_');
     const markPageAsLoadedSpy = env.sandbox.spy(page, 'markPageAsLoaded_');