🐛 [story-ads] Move click listener to<a> and use target="blank" (#…

…36335)

* use anchor and _blank

* A not a

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

@@ -205,8 +205,15 @@ 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];
+  const pageAnchorTag = createElementWithAttributes(
+    doc,
+    'a',
+    dict({
+      'class': 'i-amphtml-story-ad-link',
+      'target': '_blank',
+      'href': uiMetadata[A4AVarNames.CTA_URL],
+    })
+  );
   pageAnchorTag.textContent = uiMetadata[A4AVarNames.CTA_TYPE];
 
   pageOutlink.appendChild(pageAnchorTag);
@@ -223,7 +230,7 @@ function createPageOutlink_(doc, uiMetadata, container) {
   pageOutlink.className = 'i-amphtml-story-page-outlink-container';
 
   container.appendChild(pageOutlink);
-  return container;
+  return pageAnchorTag;
 }
 
 /**
@@ -264,6 +271,8 @@ export function createCta(doc, buttonFitter, container, uiMetadata) {
   const ctaUrl = uiMetadata[A4AVarNames.CTA_URL];
   const ctaText = uiMetadata[A4AVarNames.CTA_TYPE];
 
+  // TODO(#36035): we should be using this element in createPageOutlink_
+  // instead of creating it and dropping.
   const a = createElementWithAttributes(
     doc,
     'a',

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

@@ -268,6 +268,8 @@ describes.realWin('story-ad-ui', {amp: true}, (env) => {
           'https://www.cats.com/'
         );
         expect(containerElem.children[0].textContent).to.equal('SHOP');
+        expect(containerElem.children[0].target).to.equal('_blank');
+        expect(containerElem.children[0].tagName).to.equal('A');
       });
     });