✨🧪 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

@@ -5,6 +5,7 @@ import {CSS as attributionCSS} from '../../../build/amp-story-auto-ads-attributi
 import {CSS as ctaButtonCSS} from '../../../build/amp-story-auto-ads-cta-button-0.1.css';
 import {dev, user} from '../../../src/log';
 import {openWindowDialog} from '../../../src/open-window-dialog';
+import {isExperimentOn} from '#experiments';
 import {assertHttpsUrl} from '../../../src/url';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
 
@@ -38,6 +39,14 @@ export const A4AVarNames = {
   CTA_URL: 'cta-url',
 };
 
+/** @enum {string} */
+export const PageOutlinkLayerVarNames = [
+  'cta-accent-color',
+  'cta-accent-element',
+  'cta-image',
+  'theme',
+];
+
 /** @enum {string} */
 const DataAttrs = {
   CTA_TYPE: 'data-vars-ctatype',
@@ -223,22 +232,45 @@ 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')) {
+      const pageOutlink = doc.createElement('amp-story-page-outlink');
+      pageOutlink.setAttribute('layout', 'nodisplay');
+
+      const pageAnchorTag = doc.createElement('a');
+      pageAnchorTag.setAttribute('href', 'https://www.google.com');
+      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;
+    } else {
+      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;
+    }
   });
 }

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

@@ -7,6 +7,9 @@ import {
   maybeCreateAttribution,
   validateCtaMetadata,
 } from '../story-ad-ui';
+import {ButtonTextFitter} from '../story-ad-button-text-fitter';
+import {toggleExperiment} from '#experiments';
+import {expect} from 'chai';
 
 describes.realWin('story-ad-ui', {amp: true}, (env) => {
   let win;
@@ -216,4 +219,132 @@ 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',
+      };
+      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');
+      });
+    });
+  });
+
+  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',
+      };
+      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');
+      });
+    });
+  });
+
+  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',
+      };
+      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');
+      });
+    });
+  });
+
+  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',
+      };
+      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');
+      });
+    });
+  });
 });

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,7 @@ export class AmpStoryPage extends AMP.BaseElement {
 
   /** @return {!Promise} */
   beforeVisible() {
+    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, 'renderOpenAttachmentUI_');
+    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_');