feat: vec for helix #9

vtsaplin · 2023-12-12T08:59:40Z

No description provided.

- decouple perf measurement

aem-code-sync · 2023-12-12T08:59:43Z

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

Re-run PSI Checks

ramboz · 2023-12-12T09:19:53Z

README.md

+1. Copy the [`scripts/target.js`](scripts/target.js) to your project.
+2. Include the script in the [`head.html`](index.html) as early as possible:
+```html
+<script src="./scripts/target.js" type="module"></script>


Technically, this would load target on every single page, which will have a negative perf overhead for most pages when only a select few actually need it. I'd probably wrap this with a basic conditional and require the use of a specific meta attribute, like Target: on or something like that.

So:

<script> const targetMeta = document.head.querySelector('meta[name="target"]').content.toLowerCase().trim(); if (['true', 'on'].includes(targetMeta)) { // inject the script here and call loadTargetOffers immediately, so you don't even modify scripts.js } </script>

Or we return early in loadOffers if the meta tag isn't enabled (we still have the JS load overhead though).

I think that could be problematic when the customer uses conversion tracking based on page views. In that case adobe target must be enabled on the conversion page as well, lets say a thank you page of a form submission. It may not be obvious that the user has to "enable" target for both the location of the activity and the target page.

I would consider this a premature optimisation we may not even need as long as the impact of loading the offers is small.

ramboz · 2023-12-12T09:23:24Z

README.md

+2. Add a call to `loadTargetOffers` to the 'loadPage' function as follows:
+```js
+async function loadPage() {
+  loadTargetOffers('{Target Client Code}');


You have tight coupling here between the 2 scripts, so we actually need to make sure target.js is loaded before scripts.js. And we could also instrument directly at the top of the scripts.js without touching the loadPage method

If it is imported the module only executes if all imports are resolved. It should be fine like that.

ramboz · 2023-12-12T09:24:42Z

head.html

-<script src="/scripts/aem.js" type="module"></script>
-<script src="/scripts/scripts.js" type="module"></script>
-<link rel="stylesheet" href="/styles/styles.css"/>
+<script src="./scripts/benchmark.js" type="module"></script>


I'd skip the benchmarking for the prod version, and consider this like debug statements for now

Yes, this script is not supposed to be included in production pages. It is an optional dependency.

ramboz · 2023-12-12T09:25:10Z

package.json

@@ -7,6 +7,7 @@
    "lint:js": "eslint .",
    "lint:css": "stylelint blocks/**/*.css styles/*.css",
    "lint": "npm run lint:js && npm run lint:css",
+    "lint:fix": "npm run lint:js --fix && npm run lint:css --fix",


This is technically unrelated to the target integration

ramboz · 2023-12-12T09:26:16Z

scripts/scripts.js

@@ -127,6 +128,7 @@ function loadDelayed() {
 }

 async function loadPage() {
+  loadTargetOffers('sitesinternal');


Moving this up, just below the import theoretically a) saves a few nanoseconds of JS execution, and b) also keeps the logic together so it's easier to see at a glance

also keeps the logic together so it's easier to see at a glance

I put it here for exactly this reason. I wouldn't expect to see any important logic among the import statements.

ramboz · 2023-12-12T09:38:41Z

scripts/target.js

+ */
+function getSectionByElementSelector(selector) {
+  let section = document.querySelector(escapeSelector(selector));
+  while (section && !section.classList.contains('section')) {


Any reason not to use the .closest(…) API?

ramboz · 2023-12-12T09:39:11Z

scripts/target.js

+ * @param useProxy Whether to use the proxy.
+ */
+export default function loadOffers(client, useProxy) {
+  if (window.location.href.includes('adobe_authoring_enabled')) {


How is this set?

ramboz · 2023-12-12T09:40:44Z

scripts/target.js

+
+  const pendingOffers = fetchOffers(client, sessionId, useProxy ?? window.location.host.endsWith('workers.dev'));
+
+  getDecoratedContent()


I would return the promise here in case someone ever wants to await it for some reason… it will also make unit testing easier down the road.

ramboz · 2023-12-12T09:41:17Z

scripts/target.js

+        const { cssSelector } = offer;
+        console.debug('processing offer', offer); // eslint-disable-line no-console
+        const section = getSectionByElementSelector(cssSelector);
+        if (section) {


I would switch it to a guard clause instead

ramboz · 2023-12-12T09:42:28Z

scripts/target.js

+        }
+      });
+
+      document.body.style.visibility = 'visible';


Shouldn't this be toggled after the displayOffers?

displayOffers is called per section

buuhuu · 2023-12-12T10:00:08Z

README.md

+2. Add a call to `loadTargetOffers` to the 'loadPage' function as follows:
+```js
+async function loadPage() {
+  loadTargetOffers('{Target Client Code}');


If it is imported the module only executes if all imports are resolved. It should be fine like that.

buuhuu · 2023-12-12T10:13:48Z

scripts/target.js

+  // eslint-disable-next-line no-console
+  console.debug(`Using session ID ${sessionId}`);
+
+  document.body.style.visibility = 'hidden';


hiding the content here, not awaiting any of the async tasks and showing the content again has no effect. this can be removed as long as you don't wait anything.

It is actually awaited here:

helix-target-integration/scripts/target.js

Line 257 in eafdb21

const offers = await pendingOffers;

It is revealed here after loading offers and setting up the observers:

helix-target-integration/scripts/target.js

Line 274 in eafdb21

document.body.style.visibility = 'visible';

buuhuu · 2023-12-12T10:14:59Z

scripts/target.js

+
+  const pendingOffers = fetchOffers(client, sessionId, useProxy ?? window.location.host.endsWith('workers.dev'));
+
+  getDecoratedContent()


I don't think it makes sense to wait for the appear class on the body. This is set after the main decoration finished, but before any block got decorated. In that state all sections are hidden. We need to apply the offers when the sections appear. So this is not necessary.

Good point. I could hide the entire body part instead of just the main, which has to be awaited as it initially does not exist. Why do we hide the main?

The problem is that fetching offers for a webpage can take longer than expected. If the offers arrive late, after the main content of the page (LCP) has loaded, it causes issues like flickering and showing default content. To prevent this, we hide the main part of the page as a precaution, because we don't know yet which specific sections the offers will target.

@ramboz @buuhuu thoughts?

buuhuu · 2023-12-12T10:17:21Z

scripts/target.js

+          resolve(section);
+        }
+      });
+      observer.observe(section, config);


having one observer for each section has a performance impact. not a big one as we only have a few sections, but why not having a single observer on <main> instead? That code would be significantly easier to understand.

I was unsure about the performance impact, so I am attaching an observer to smaller DOM subtrees.

buuhuu · 2023-12-12T10:18:05Z

scripts/target.js

+  console.debug(`Loading offers for client ${client} and url ${url}`); // eslint-disable-line no-console
+
+  const payload = {
+    context: {


you left our quite some bits and pieces in the context.

buuhuu · 2023-12-12T10:18:49Z

scripts/target.js

+
+  document.body.style.visibility = 'hidden';
+
+  const pendingOffers = fetchOffers(client, sessionId, useProxy ?? window.location.host.endsWith('workers.dev'));


you should inverse the logic and use the proxy always if not hlx.page, hlx.live or localhost.

vtsaplin and others added 9 commits December 7, 2023 10:07

Update README.md

a070fce

feat: target integration (#1)

26e2feb

docs: update readme

551cfec

docs: update readme

a2dd215

docs: update readme

3a9ed41

feat: suppress targeting in authoring mode

bd01e87

- decouple perf measurement

chore: remove empty lines

bf51873

- decouple perf measurement

feat: escape ids that start with digit

eafdb21

docs: update readme

605e02b

ramboz reviewed Dec 12, 2023

View reviewed changes

buuhuu reviewed Dec 12, 2023

View reviewed changes


		const pendingOffers = fetchOffers(client, sessionId, useProxy ?? window.location.host.endsWith('workers.dev'));

		getDecoratedContent()


		document.body.style.visibility = 'hidden';

		const pendingOffers = fetchOffers(client, sessionId, useProxy ?? window.location.host.endsWith('workers.dev'));

feat: vec for helix #9

Are you sure you want to change the base?

feat: vec for helix #9

Uh oh!

Conversation

vtsaplin commented Dec 12, 2023

Uh oh!

aem-code-sync bot commented Dec 12, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

buuhuu Dec 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

buuhuu Dec 13, 2023 •

edited

Loading