Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add storefront events SDK and collector #21

Merged
merged 6 commits into from
Mar 15, 2024
Merged

Add storefront events SDK and collector #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d759a55
Add storefront events SDK and collector
herzog31 Jan 9, 2024
66cc0f5
Add storefront events SDK and collector
herzog31 Jan 10, 2024
491aed4
Merge branch 'main' of github.com:hlxsites/aem-boilerplate-commerce i…
herzog31 Mar 8, 2024
dd7bf08
Optimize storefront events initalization
herzog31 Mar 8, 2024
aff7f83
Merge branch 'main' of github.com:hlxsites/aem-boilerplate-commerce i…
herzog31 Mar 15, 2024
0ea2624
Add storefront context directly to ACDL
herzog31 Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ scripts/preact.js
scripts/htm.js
scripts/acdl
tools/picker
scripts/commerce-events-collector.js
scripts/commerce-events-sdk.js
scripts/widgets
472 changes: 468 additions & 4 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"lint:js": "eslint .",
"lint:css": "stylelint blocks/**/*.css styles/*.css",
"lint": "npm run lint:js && npm run lint:css",
"start": "aem up --print-index"
"start": "aem up --print-index",
"postinstall": "node postinstall.js"
},
"repository": {
"type": "git",
Expand All @@ -29,5 +30,9 @@
"eslint-plugin-import": "2.29.1",
"stylelint": "16.1.0",
"stylelint-config-standard": "36.0.0"
},
"dependencies": {
"@adobe/magento-storefront-event-collector": "^1.7.1",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@herzog31 Is it ok to use versions 1.8.0 for @adobe/magento-storefront-event-collector and @adobe/magento-storefront-events-sdk ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you can use newer versions.

"@adobe/magento-storefront-events-sdk": "^1.7.1"
}
}
5 changes: 5 additions & 0 deletions postinstall.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const fs = require('fs');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@herzog31 you can probably add this file to the .hlxignore list

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion. Fix available in #45.

const path = require('path');

fs.copyFileSync(path.resolve(__dirname, './node_modules/@adobe/magento-storefront-event-collector/dist/index.js'), path.resolve(__dirname, './scripts/commerce-events-collector.js'));
fs.copyFileSync(path.resolve(__dirname, './node_modules/@adobe/magento-storefront-events-sdk/dist/index.js'), path.resolve(__dirname, './scripts/commerce-events-sdk.js'));
2 changes: 2 additions & 0 deletions scripts/commerce-events-collector.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions scripts/commerce-events-sdk.js
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions scripts/delayed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,36 @@
// eslint-disable-next-line import/no-cycle
import { sampleRUM } from './aem.js';
import { getConfigValue } from './configs.js';

// Core Web Vitals RUM collection
sampleRUM('cwv');

// add more delayed functionality here

// Load Commerce events SDK and collector
const config = {
environmentId: await getConfigValue('commerce-environment-id'),
environment: await getConfigValue('commerce-environment'),
storeUrl: await getConfigValue('commerce-store-url'),
websiteId: await getConfigValue('commerce-website-id'),
websiteCode: await getConfigValue('commerce-website-code'),
storeId: await getConfigValue('commerce-store-id'),
storeCode: await getConfigValue('commerce-store-code'),
storeViewId: await getConfigValue('commerce-store-view-id'),
storeViewCode: await getConfigValue('commerce-store-view-code'),
websiteName: await getConfigValue('commerce-website-name'),
storeName: await getConfigValue('commerce-store-name'),
storeViewName: await getConfigValue('commerce-store-view-name'),
baseCurrencyCode: await getConfigValue('commerce-base-currency-code'),
storeViewCurrencyCode: await getConfigValue('commerce-base-currency-code'),
storefrontTemplate: 'Franklin',
};

window.adobeDataLayer.push(
{ storefrontInstanceContext: config },
{ eventForwardingContext: { commerce: true, aep: false } },
);

// Load events SDK and collector
import('./commerce-events-sdk.js');
import('./commerce-events-collector.js');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@herzog31 Since this is all delayed, does it mean that any event occurring after 3s will not be collected ? E.g. if the user clicks away or closes the window before this is loaded ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If a user leaves the page before this is loaded, the events will not be collected. That's correct and unfortunately a known limitation.

There are some ideas to fix this in https://git.corp.adobe.com/mabecker/acdl2 which can persist events in session storage to make sure they can be collected on the next page. But this will take some more work and will be added to the mainline ACDL in the near future.

Loading