Skip to content

Commit

Permalink
MWPW-163041: fix analytics & add docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@3ch023
3ch023 committed Nov 26, 2024
1 parent 4c688d0 commit 874f418
Show file tree
Hide file tree
Showing 10 changed files with 151 additions and 74 deletions.
2 changes: 1 addition & 1 deletion libs/deps/mas/mas.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion libs/deps/mas/merch-card.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion libs/features/mas/dist/mas.js
View file

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions libs/features/mas/docs/checkout-link.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ <h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
<th>Description</th>
<th>Default Value</th>
<th>Required</th>
<th>Provider</th>
</tr>
</thead>
<tbody>
Expand All @@ -72,66 +73,91 @@ <h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
<td>Offer Selector ID, can be multiple, separeted by comma</td>
<td></td>
<td><code>true</code></td>
<td>mas.js or consumer code</td>
</tr>
<tr>
<td><code>data-checkout-workflow</code></td>
<td>Target checkout workflow for the generation of checkout urls</td>
<td>UCv3</td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-checkout-workflow-step</code></td>
<td><a href="https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&amp;title=UCv3+Link+Creation+Guide#UCv3LinkCreationGuide-RegularWorkflow">workflow step</a> to land on the unified checkout page</td>
<td>email</td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-extra-options</code></td>
<td>additional query params to append to the url, see: <a href="https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&amp;title=UCv3+Link+Creation+Guide#UCv3LinkCreationGuide-Tableofpublicqueryparams">Table of public query params</a></td>
<td>{}</td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-ims-country</code></td>
<td>the ims country to code of the user if signed in, overrides the locale country in the generated checkout url</td>
<td></td>
<td><code>false</code></td>
<td>mas.js or consumer code</td>
</tr>
<tr>
<td><code>data-perpetual</code></td>
<td>whether this is a perpetual offer <code>true|false</code></td>
<td></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-promotion-code</code></td>
<td>Flex promotion code, if applicable</td>
<td></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-quantity</code></td>
<td>Quantity of the offer to purchase</td>
<td>1</td>
<td><code>false</code></td>
<td>mas.js or consumer code</td>
</tr>
<tr>
<td><code>data-entitlement</code></td>
<td><code>entitlement</code> flag for client side interpretation</td>
<td><code>false</code></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-upgrade</code></td>
<td><code>upgrade</code> flag for client side interpretation</td>
<td><code>false</code></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-modal</code></td>
<td><code>modal</code> flag for client side interpretation</td>
<td><code>false</code></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>data-analytics-id</code></td>
<td>human-readable, non-translatable link id for analytics. Authored in Studio in Link Editor.</td>
<td><code>false</code></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>daa-ll</code></td>
<td>martech-compatible link id for analytics. Format: ‘${data-analytics-id}-${#}’, where # is the position of the link within a card. E.g. : see-terms-1, buy-now-2</td>
<td><code>false</code></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
</tbody>
</table>
Expand Down
15 changes: 15 additions & 0 deletions libs/features/mas/docs/merch-card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ <h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
<th>Description</th>
<th>Default Value</th>
<th>Required</th>
<th>Provider</th>
</tr>
</thead>
<tbody>
Expand All @@ -131,18 +132,28 @@ <h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
<td>Variant in terms design. Not required when used with an <code>aem-fragment</code></td>
<td></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>consonant</code></td>
<td>Whether to use consonant styles without sp-button decorator around the footer CTAs.</td>
<td><code>true</code> if <code>aem-fragment</code> is not used</td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>size</code></td>
<td>card width; a card can span over 2 columns or entire row on a css grid <code>wide|super-wide</code></td>
<td></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
<tr>
<td><code>daa-lh</code></td>
<td>Analytics identifier of a card. Value is coming from the ‘PRODUCT_CODE’ tag set on the card (for now manual authoring required, later will be tagged automatically). Sample values: ‘ccsn’ or ‘phlt’.</td>
<td></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -274,6 +285,7 @@ <h3 id="attributes-1" tabindex="-1">Attributes <a class="header-anchor" href="#a
<th>Description</th>
<th>Default Value</th>
<th>Required</th>
<th>Provider</th>
</tr>
</thead>
<tbody>
Expand All @@ -282,18 +294,21 @@ <h3 id="attributes-1" tabindex="-1">Attributes <a class="header-anchor" href="#a
<td>Fragment id. The copy/use feature in M@S Studio will copy the id/markup to the clipboard</td>
<td></td>
<td><code>true</code></td>
<td>consumer code</td>
</tr>
<tr>
<td><code>title</code></td>
<td>Informative title</td>
<td></td>
<td><code>false</code></td>
<td>consumer code</td>
</tr>
<tr>
<td><code>ims</code></td>
<td>attempts to use an IMS access token via <code>window.adobeid.authorize()</code> to fetch a fragment</td>
<td></td>
<td><code>false</code></td>
<td>mas.js</td>
</tr>
</tbody>
</table>
Expand Down
28 changes: 15 additions & 13 deletions libs/features/mas/docs/src/checkout-link.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,21 @@ See [MAS](mas.html#terminology) to learn more.

## Attributes {#attributes}

| Attribute | Description | Default Value | Required |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
| `data-wcs-osi` | Offer Selector ID, can be multiple, separeted by comma | | `true` |
| `data-checkout-workflow` | Target checkout workflow for the generation of checkout urls | UCv3 | `false` |
| `data-checkout-workflow-step` | [workflow step](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&title=UCv3+Link+Creation+Guide#UCv3LinkCreationGuide-RegularWorkflow) to land on the unified checkout page | email | `false` |
| `data-extra-options` | additional query params to append to the url, see: [Table of public query params](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&title=UCv3+Link+Creation+Guide#UCv3LinkCreationGuide-Tableofpublicqueryparams) | {} | `false` |
| `data-ims-country` | the ims country to code of the user if signed in, overrides the locale country in the generated checkout url | | `false` |
| `data-perpetual` | whether this is a perpetual offer `true\|false` | | `false` |
| `data-promotion-code` | Flex promotion code, if applicable | | `false` |
| `data-quantity` | Quantity of the offer to purchase | 1 | `false` |
| `data-entitlement` | `entitlement` flag for client side interpretation | `false` | `false` |
| `data-upgrade` | `upgrade` flag for client side interpretation | `false` | `false` |
| `data-modal` | `modal` flag for client side interpretation | `false` | `false` |
| Attribute | Description | Default Value | Required | Provider |
| ----------------------------- | ------------------------------------------------------- | ------------- | -------- | -------- |
| `data-wcs-osi` | Offer Selector ID, can be multiple, separeted by comma | | `true` | mas.js or consumer code |
| `data-checkout-workflow` | Target checkout workflow for the generation of checkout urls | UCv3 | `false` | mas.js |
| `data-checkout-workflow-step` | [workflow step](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&title=UCv3+Link+Creation+Guide#UCv3LinkCreationGuide-RegularWorkflow) to land on the unified checkout page | email | `false` | mas.js |
| `data-extra-options` | additional query params to append to the url, see: [Table of public query params](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=businessservices&title=UCv3+Link+Creation+Guide#UCv3LinkCreationGuide-Tableofpublicqueryparams) | {} | `false` | mas.js |
| `data-ims-country` | the ims country to code of the user if signed in, overrides the locale country in the generated checkout url | | `false` | mas.js or consumer code |
| `data-perpetual` | whether this is a perpetual offer `true\|false` | | `false` | mas.js |
| `data-promotion-code` | Flex promotion code, if applicable | | `false` | mas.js |
| `data-quantity` | Quantity of the offer to purchase | 1 | `false` | mas.js or consumer code |
| `data-entitlement` | `entitlement` flag for client side interpretation | `false` | `false` | mas.js |
| `data-upgrade` | `upgrade` flag for client side interpretation | `false` | `false` | mas.js |
| `data-modal` | `modal` flag for client side interpretation | `false` | `false` | mas.js |
| `data-analytics-id` | human-readable, non-translatable link id for analytics. Authored in Studio in Link Editor. | `false` | `false` | mas.js |
| `daa-ll` | martech-compatible link id for analytics. Format: '${data-analytics-id}-${#}', where # is the position of the link within a card. E.g. : see-terms-1, buy-now-2 | `false` | `false` | mas.js |

### Examples {#examples}

Expand Down
21 changes: 11 additions & 10 deletions libs/features/mas/docs/src/merch-card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,12 @@ CCD Gallery provides a comprehensive list of all supported card variants in CCD.
### Attributes
| Name | Description | Default Value | Required |
| ----------- | ----------------------------------------------------------------------------------------- | ------------------------------------ | -------- |
| `variant` | Variant in terms design. Not required when used with an `aem-fragment` | | `false` |
| `consonant` | Whether to use consonant styles without sp-button decorator around the footer CTAs. | `true` if `aem-fragment` is not used | `false` |
| `size` | card width; a card can span over 2 columns or entire row on a css grid `wide\|super-wide` | | `false` |
| Name | Description | Default Value | Required | Provider |
| ----------- | ----------------------------------------------------------------------------------------- | ------------------------------------ | -------- | -------- |
| `variant` | Variant in terms design. Not required when used with an `aem-fragment` | | `false` | mas.js |
| `consonant` | Whether to use consonant styles without sp-button decorator around the footer CTAs. | `true` if `aem-fragment` is not used | `false` | mas.js |
| `size` | card width; a card can span over 2 columns or entire row on a css grid `wide\|super-wide` | | `false` | mas.js |
| `daa-lh` | Analytics identifier of a card. Value is coming from the 'PRODUCT_CODE' tag set on the card (for now manual authoring required, later will be tagged automatically). Sample values: 'ccsn' or 'phlt'. | | `false` | mas.js |
#### Active variants:
Expand Down Expand Up @@ -206,11 +207,11 @@ CCD Gallery provides a comprehensive list of all supported card variants in CCD.
### Attributes
| Name | Description | Default Value | Required |
| ---------- | ---------------------------------------------------------------------------------------- | ------------- | -------- |
| `fragment` | Fragment id. The copy/use feature in M@S Studio will copy the id/markup to the clipboard | | `true` |
| `title` | Informative title | | `false` |
| `ims` | attempts to use an IMS access token via `window.adobeid.authorize()` to fetch a fragment | | `false` |
| Name | Description | Default Value | Required | Provider |
| ---------- | ---------------------------------------------------------------------------------------- | ------------- | -------- | -------- |
| `fragment` | Fragment id. The copy/use feature in M@S Studio will copy the id/markup to the clipboard | | `true` | consumer code |
| `title` | Informative title | | `false` | consumer code |
| `ims` | attempts to use an IMS access token via `window.adobeid.authorize()` to fetch a fragment | | `false` | mas.js |
### Properties
Expand Down
2 changes: 1 addition & 1 deletion libs/features/mas/src/hydrate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,6 @@ export async function hydrate(fragment, merchCard) {
const { aemFragmentMapping } = merchCard.variantLayout;
if (!aemFragmentMapping) return;

processAnalytics(fields, merchCard);
processBackgroundImage(fields,merchCard,aemFragmentMapping.backgroundImage,variant);
processBadge(fields, merchCard);
processCTAs(fields, merchCard, aemFragmentMapping, variant);
Expand All @@ -261,4 +260,5 @@ export async function hydrate(fragment, merchCard) {
processSize(fields, merchCard, aemFragmentMapping.allowedSizes);
processSubtitle(fields, merchCard, aemFragmentMapping.subtitle);
processTitle(fields, merchCard, aemFragmentMapping.title);
processAnalytics(fields, merchCard);
}
2 changes: 1 addition & 1 deletion libs/features/mas/src/variants/ccd-slice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { VariantLayout } from './variant-layout.js';
import { html, css } from 'lit';
import { CSS } from './ccd-slice.css.js';

const AEM_FRAGMENT_MAPPING = {
export const AEM_FRAGMENT_MAPPING = {
mnemonics: { size: 'm' },
backgroundImage: { tag: 'div', slot: 'image' },
description: { tag: 'div', slot: 'body-s' },
Expand Down
Loading

0 comments on commit 874f418

Please sign in to comment.