MWPW-161645: lana logging for CCD

.github/workflows/run-tests.yaml

@@ -22,6 +22,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
+        cache: 'npm'
 
     - name: Install dependencies
       run: npm install

libs/features/mas/docs/ccd.html

@@ -28,13 +28,9 @@
         envOverride && ENVS[envOverride]
           ? ENVS[envOverride]
           : ENVS.prod;
-      const baseUrl =
-        !envOverride && href.includes('localhost')
-          ? 'http://localhost:8080'
-          : `https://${env}.adobe.com`;
       const meta = document.createElement('meta');
       meta.name = 'aem-base-url';
-      meta.content = baseUrl;
+      meta.content = `https://${env}.adobe.com`;
       document.head.appendChild(meta);
     </script>
     <script type="module" src="../dist/mas.js"></script>
@@ -53,6 +49,9 @@
         const value = params.get(attribute);
         if (value) masCommerceService.setAttribute(attribute, value);
       });
+      masCommerceService.setAttribute('host-env', 'prod');
+      masCommerceService.setAttribute('lana-tags', 'ccd');
+      masCommerceService.setAttribute('lana-sample-rate', '100'); // optional, default value is set to '1'
       document.head.appendChild(masCommerceService);
     </script>
 </head>

libs/features/mas/docs/mas.html

@@ -95,12 +95,14 @@ <h2 id="how-it-works" tabindex="-1">How It Works <a class="header-anchor" href="
 <li>WCS provides the necessary commerce data through its APIs.</li>
 </ol>
 <h2 id="analytics" tabindex="-1">Analytics <a class="header-anchor" href="#analytics" href="#analytics" title="Permalink to this heading">#</a></h2>
-<p>For analytics purposes, every <merch-card> tag can be tagged with ‘PRODUCT_CODE’ tag in Studio (manually, later it will be done automatically). When 'PRODUCT_CODE tag is present on the card, <merch-card> will reflect the tag value in ‘daa-lh’ attribute. It is a non-translatable, human-readable card id.
-To set a non-translatable, human-readable id on link open Link editor in Studio and select the value from the dropdown.
-Once value is set, every link will have 2 attributes:
-data-analytics-id - the value set in studio, without changes e.g. ‘buy-now’
-daa-ll - the value set in studio + position of the link within the card, e.g. ‘free-trial-1’, ‘buy-now-2’
-Example: if you have 5 cards with buy-now cta on your page, you can take a combination of merch-card daa-lh and link daa-ll:
+<p>For analytics purposes, every <code>&lt;merch-card&gt;</code> tag can be tagged with ‘PRODUCT_CODE’ tag in Studio. When <code>PRODUCT_CODE</code> tag is present on the card, <code>&lt;merch-card&gt;</code> will reflect the tag value in the ‘daa-lh’ attribute. It is a non-translatable, human-readable card id.
+To set a non-translatable, human-readable id on link - open Link editor in Studio and select the value from the dropdown.
+Once value is set, every link will have 2 attributes:</p>
+<ul>
+<li>data-analytics-id - the value set in studio, without changes e.g. ‘buy-now’</li>
+<li>daa-ll - the value set in studio + position of the link within the card, e.g. ‘free-trial-1’, ‘buy-now-2’</li>
+</ul>
+<p>Example: if you have 5 cards with buy-now cta on your page, you can take a combination of merch-card daa-lh and link daa-ll:
 ${daa-lh}–${daa-ll}: will result in ‘phlt–buy-now-2’.</p>
 
 </sp-theme>

libs/features/mas/docs/mas.js.html

@@ -51,7 +51,10 @@ <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="
 </ul>
 <h2 id="enablement-mas-commerce-service" tabindex="-1">Enablement <code>mas-commerce-service</code> <a class="header-anchor" href="#enablement-mas-commerce-service" href="#enablement-mas-commerce-service" title="Permalink to this heading">#</a></h2>
 <p>You do need to have mas.js on your page / application, including it can be done like the following</p>
-<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.adobe.com/libs/features/mas/mas/dist/mas.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>
+    <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.adobe.com/libs/features/mas/mas/dist/mas.js&quot;</span>
+    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>
+&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" href="#attributes" title="Permalink to this heading">#</a></h3>
 <table>
@@ -95,6 +98,12 @@ <h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
 <td><code>false</code></td>
 </tr>
 <tr>
+<td><code>host-env</code></td>
+<td>host environment, either <code>stage</code> or <code>prod</code></td>
+<td><code>prod</code></td>
+<td><code>false</code></td>
+</tr>
+<tr>
 <td><code>force-tax-exclusive</code></td>
 <td>force all price display to be tax exclusive</td>
 <td><code>false</code></td>
@@ -118,6 +127,18 @@ <h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
 <td><code>wcms-commerce-ims-ro-user-milo</code></td>
 <td><code>false</code></td>
 </tr>
+<tr>
+<td><code>lana-tags</code></td>
+<td>Enables logging via lana<a href="https://github.com/adobecom/milo/blob/stage/libs/utils/lana.js">^1</a> with the given tags. e.g:<code>ccd</code>.</td>
+<td></td>
+<td><code>false</code></td>
+</tr>
+<tr>
+<td><code>lana-sample-rate</code></td>
+<td>Sets the sampling rate, see <a href="https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=WCMSOps&amp;title=LANA+-+Log+Always+Never+Assume">^1</a> for details.</td>
+<td>1</td>
+<td><code>false</code></td>
+</tr>
 </tbody>
 </table>
 <h3 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" href="#methods" title="Permalink to this heading">#</a></h3>
@@ -170,7 +191,10 @@ <h3 id="examples" tabindex="-1">Examples <a class="header-anchor" href="#example
 <span class="hljs-tag">&lt;<span class="hljs-name">mas-commerce-service</span> <span class="hljs-attr">country</span>=<span class="hljs-string">&quot;JP&quot;</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mas-commerce-service</span>&gt;</span>
 
 <span class="hljs-comment">&lt;!-- with custom api key &amp; checkout clientid --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">mas-commerce-service</span> <span class="hljs-attr">wcs-api-key</span>=<span class="hljs-string">&quot;custom-api-key&quot;</span> <span class="hljs-attr">checkout-client-id</span>=<span class="hljs-string">&quot;custom-client-id&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mas-commerce-service</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">mas-commerce-service</span>
+    <span class="hljs-attr">wcs-api-key</span>=<span class="hljs-string">&quot;custom-api-key&quot;</span>
+    <span class="hljs-attr">checkout-client-id</span>=<span class="hljs-string">&quot;custom-client-id&quot;</span>
+&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mas-commerce-service</span>&gt;</span>
 </code></pre>
 <p>you can play around with below price, either adding locale, language or env as parameters that will be injected to <code>mas-commerce-service</code> as attributes, and then it will be activated.</p>
 <p class="example">

libs/features/mas/docs/src/mas.js.md

@@ -15,22 +15,32 @@ mas.js includes the followings custom elements:
 You do need to have mas.js on your page / application, including it can be done like the following
 
 ```html
-<script src="https://www.adobe.com/libs/features/mas/mas/dist/mas.js" type="module"></script>
+<script
+    src="https://www.adobe.com/libs/features/mas/mas/dist/mas.js"
+    type="module"
+></script>
 ```
 
 ### Attributes
 
-| Name                     | Description                                                                                         | Default Value                   | Required |
-| ------------------------ | --------------------------------------------------------------------------------------------------- | ------------------------------- | -------- |
-| `allow-override`         | enables override of commerce env/landscape via query parameters(commerce.env/commerce.landscape)    |  `false`                        |  `false` |
-| `checkout-client-id`     | checkout client id                                                                                  |  `false`                        |  `false` |
-| `checkout-workflow-step` | default checkout workflow step                                                                      | `CheckoutWorkflowStep.EMAIL`    | `false`  |
-| `country`                | country of the offers to retrieve from WCS, determines the currency, price format, etc.             | US or locale country if set     | `false`  |
-|  `env`                   | commerce environment you want this page to use, either `stage` or `prod`                            |  `prod`                         |  `false` |
-|  `force-tax-exclusive`   | force all price display to be tax exclusive                                                         |  `false`                        |  `false` |
-| `locale`                 | currency & price locale you need, must belong to one of the [supported locales](#supported-locales) | `en_US`                         | `false`  |
-| `language`               | language of the price literal, e.g: per license                                                     | en or locale langauge if set    | `false`  |
-| `wcs-api-key`            | api key used for making WCS calls                                                                   | `wcms-commerce-ims-ro-user-milo`| `false`  |
+| Name                     | Description                                                                                         | Default Value                    | Required |
+| ------------------------ | --------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| `allow-override`         | enables override of commerce env/landscape via query parameters(commerce.env/commerce.landscape)    |  `false`                         |  `false` |
+| `checkout-client-id`     | checkout client id                                                                                  |  `false`                         |  `false` |
+| `checkout-workflow-step` | default checkout workflow step                                                                      | `CheckoutWorkflowStep.EMAIL`     | `false`  |
+| `country`                | country of the offers to retrieve from WCS, determines the currency, price format, etc.             | US or locale country if set      | `false`  |
+|  `env`                   | commerce environment you want this page to use, either `stage` or `prod`                            |  `prod`                          |  `false` |
+|  `host-env`              | host environment, either `stage` or `prod`                            |  `prod`                          |  `false` |
+|  `force-tax-exclusive`   | force all price display to be tax exclusive                                                         |  `false`                         |  `false` |
+| `locale`                 | currency & price locale you need, must belong to one of the [supported locales](#supported-locales) | `en_US`                          | `false`  |
+| `language`               | language of the price literal, e.g: per license                                                     | en or locale langauge if set     | `false`  |
+| `wcs-api-key`            | api key used for making WCS calls                                                                   | `wcms-commerce-ims-ro-user-milo` | `false`  |
+| `lana-tags`              | Enables logging via lana[^1][^2] with the given tags. e.g:`ccd`.                       |                                  | `false`  |
+| `lana-sample-rate`       | Sets the sampling rate, see [^1] for details.                                                       | 1                                | `false`  |
+
+[^1]: https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=WCMSOps&title=LANA+-+Log+Always+Never+Assume
+
+[^2]: https://github.com/adobecom/milo/blob/stage/libs/utils/lana.js
 
 ### Methods
 
@@ -66,7 +76,10 @@ You do need to have mas.js on your page / application, including it can be done
 <mas-commerce-service country="JP" language="en"></mas-commerce-service>
 
 <!-- with custom api key & checkout clientid -->
-<mas-commerce-service wcs-api-key="custom-api-key" checkout-client-id="custom-client-id"></mas-commerce-service>
+<mas-commerce-service
+    wcs-api-key="custom-api-key"
+    checkout-client-id="custom-client-id"
+></mas-commerce-service>
 ```
 
 you can play around with below price, either adding locale, language or env as parameters that will be injected to `mas-commerce-service` as attributes, and then it will be activated.

libs/features/mas/docs/src/mas.md

@@ -58,10 +58,11 @@ MAS integrates its components to provide a seamless commerce experience:
 4. WCS provides the necessary commerce data through its APIs.
 
 ## Analytics
-For analytics purposes, every <merch-card> tag can be tagged with 'PRODUCT_CODE' tag in Studio (manually, later it will be done automatically). When 'PRODUCT_CODE tag is present on the card, <merch-card> will reflect the tag value in 'daa-lh' attribute. It is a non-translatable, human-readable card id.
-To set a non-translatable, human-readable id on link open Link editor in Studio and select the value from the dropdown.
+For analytics purposes, every `<merch-card>` tag can be tagged with 'PRODUCT_CODE' tag in Studio. When `PRODUCT_CODE` tag is present on the card, `<merch-card>` will reflect the tag value in the 'daa-lh' attribute. It is a non-translatable, human-readable card id.
+To set a non-translatable, human-readable id on link - open Link editor in Studio and select the value from the dropdown.
 Once value is set, every link will have 2 attributes:
-data-analytics-id - the value set in studio, without changes e.g. 'buy-now'
-daa-ll - the value set in studio + position of the link within the card, e.g. 'free-trial-1', 'buy-now-2'
+* data-analytics-id - the value set in studio, without changes e.g. 'buy-now'
+* daa-ll - the value set in studio + position of the link within the card, e.g. 'free-trial-1', 'buy-now-2'
+
 Example: if you have 5 cards with buy-now cta on your page, you can take a combination of merch-card daa-lh and link daa-ll:
 ${daa-lh}--${daa-ll}: will result in 'phlt--buy-now-2'.

libs/features/mas/src/defaults.js

@@ -5,7 +5,6 @@ import {
 } from './external.js';
 import { Landscape } from './constants.js';
 
-/** @type {Commerce.Defaults} */
 export const Defaults = Object.freeze({
     checkoutClientId: 'adobe_com',
     checkoutWorkflow: CheckoutWorkflow.V3,