@pushwoosh/dumb-components 1.1.222 → 1.1.223

package/EmailTemplatePreview/__tests__/clickMap.test.js

@@ -1,6 +1,7 @@
 import { CLICK_MAP_BADGE_ATTRIBUTE, decorateClickMap, matchClickMapItems } from '../clickMap';
 const PROMO = 'http://spartak.com/matchtowin';
 const TICKETS = 'https://tickets.spartak.com/zones/18956';
+const SHOP = 'https://shop.spartak.com/';
 const HTML = `
   <a href="${PROMO}?utm_source=email&amp;utm_content=img"><img src="banner.png" alt=""></a>
   <p>Подробности на <a href="${PROMO}?utm_source=email">странице акции</a>.</p>
@@ -8,12 +9,15 @@ const HTML = `
   <a href="${TICKETS}?utm_source=email">Купить билеты</a>
   <a href="${TICKETS}?utm_source=email">Купить билеты</a>
   <a href="[% param.url_unsub %]">Отписаться</a>
+  <a data-pw-lid="aaaa11112222" href="${SHOP}">В магазин</a>
+  <a data-pw-lid="bbbb33334444" href="${SHOP}">В магазин</a>
 `;
-const item = (key, link, title, clicks) => ({
+const item = (key, link, title, clicks, linkId) => ({
   key,
   link,
   title,
-  clicks
+  clicks,
+  linkId
 });
 function createDocument() {
   const frameDocument = document.implementation.createHTMLDocument('preview');
@@ -64,6 +68,33 @@ describe('matchClickMapItems', () => {
     expect(placement.pooled).toEqual(['promo']);
     expect(matches).toHaveLength(3);
   });
+  it('tells identical anchors apart by the stamped link id', () => {
+    const {
+      matches,
+      placement
+    } = matchClickMapItems(createDocument(), [item('top', SHOP, 'В магазин', 40, 'aaaa11112222'), item('bottom', SHOP, 'В магазин', 9, 'bbbb33334444')]);
+    expect(placement).toEqual({
+      placed: ['top', 'bottom'],
+      pooled: [],
+      unplaced: []
+    });
+    expect(matches.map(({
+      anchor,
+      items: matched
+    }) => [anchor.getAttribute('data-pw-lid'), matched.map(row => row.key)])).toEqual([['aaaa11112222', ['top']], ['bbbb33334444', ['bottom']]]);
+  });
+  it('falls back to link and text when the template no longer carries the recorded link id', () => {
+    const {
+      matches,
+      placement
+    } = matchClickMapItems(createDocument(), [item('old', SHOP, 'В магазин', 3, 'cccc55556666'), item('unstamped', PROMO, 'странице акции', 1)]);
+    expect(placement).toEqual({
+      placed: ['unstamped'],
+      pooled: ['old'],
+      unplaced: []
+    });
+    expect(matches).toHaveLength(3);
+  });
   it('reports rows whose link is not in the template as unplaced', () => {
     const {
       matches,

package/EmailTemplatePreview/clickMap.d.ts

@@ -19,7 +19,9 @@ export type EmailClickMapDecorateOptions = {
 };
 /** Attribute every badge carries, so tests and consumers can find them. */
 export declare const CLICK_MAP_BADGE_ATTRIBUTE = "data-pw-click-map-badge";
-/** Lands click-tracking rows on template anchors by (link, text), falling back to every anchor of the link. */
+/** Stable anchor id stamped into the template html on save; the click carries it as `linkId`. */
+export declare const CLICK_MAP_LINK_ID_ATTRIBUTE = "data-pw-lid";
+/** Lands click-tracking rows on template anchors by stamped `linkId`, else by (link, text), else every anchor of the link. */
 export declare function matchClickMapItems(document: Document, items: EmailClickMapItem[]): EmailClickMapMatchResult;
 /** Draws click-count badges over matched anchors, outlines `activeKey`; returns a cleanup. */
 export declare function decorateClickMap(document: Document, options: EmailClickMapDecorateOptions): () => void;

package/EmailTemplatePreview/clickMap.js

@@ -1,5 +1,7 @@
 /** Attribute every badge carries, so tests and consumers can find them. */
 export const CLICK_MAP_BADGE_ATTRIBUTE = 'data-pw-click-map-badge';
+/** Stable anchor id stamped into the template html on save; the click carries it as `linkId`. */
+export const CLICK_MAP_LINK_ID_ATTRIBUTE = 'data-pw-lid';
 const ACTIVE_COLOR = '#00b2ff';
 const IDLE_COLOR = 'rgba(36, 48, 66, 0.82)';
 const compactNumber = new Intl.NumberFormat('en', {
@@ -10,14 +12,19 @@ const stripQuery = url => url.split('?')[0].trim();
 const normalizeText = text => text.replace(/\s+/g, ' ').trim();
 const anchorText = anchor => normalizeText(anchor.textContent ?? '');
 const anchorLink = anchor => stripQuery(anchor.getAttribute('href') ?? '');
-/** Lands click-tracking rows on template anchors by (link, text), falling back to every anchor of the link. */
+/** Lands click-tracking rows on template anchors by stamped `linkId`, else by (link, text), else every anchor of the link. */
 export function matchClickMapItems(document, items) {
   const anchorsByLink = new Map();
+  const anchorsByLinkId = new Map();
   document.querySelectorAll('a[href]').forEach(anchor => {
     const link = anchorLink(anchor);
+    const linkId = anchor.getAttribute(CLICK_MAP_LINK_ID_ATTRIBUTE);
     if (link) {
       anchorsByLink.set(link, [...(anchorsByLink.get(link) ?? []), anchor]);
     }
+    if (linkId) {
+      anchorsByLinkId.set(linkId, [...(anchorsByLinkId.get(linkId) ?? []), anchor]);
+    }
   });
   const itemsByAnchor = new Map();
   const placement = {
@@ -25,11 +32,15 @@ export function matchClickMapItems(document, items) {
     pooled: [],
     unplaced: []
   };
-  items.forEach(item => {
+  const targetsByLinkAndText = item => {
     const candidates = anchorsByLink.get(stripQuery(item.link)) ?? [];
     const title = normalizeText(item.title);
     const exact = candidates.filter(anchor => anchorText(anchor) === title);
-    const targets = exact.length > 0 ? exact : candidates;
+    return exact.length > 0 ? exact : candidates;
+  };
+  items.forEach(item => {
+    const stamped = item.linkId ? anchorsByLinkId.get(item.linkId) : undefined;
+    const targets = stamped ?? targetsByLinkAndText(item);
     if (targets.length === 0) {
       placement.unplaced.push(item.key);
       return;

package/EmailTemplatePreview/types.d.ts

@@ -6,6 +6,8 @@ export type EmailClickMapItem = {
     link: string;
     /** Anchor text recorded with the click; empty for image links. */
     title: string;
+    /** Stable anchor id (`data-pw-lid`) recorded with the click; matched before link and text when set. */
+    linkId?: string;
     clicks: number;
 };
 /** How the rows of {@link EmailClickMapProps.items} landed on the rendered template. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.222",
+  "version": "1.1.223",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",