https://github.com/adobe-rnd/helix-target-integration

The project is a proof of concept for integrating Target VEC with Helix
https://github.com/adobe-rnd/helix-target-integration

Last synced: 3 days ago
JSON representation

The project is a proof of concept for integrating Target VEC with Helix

• Host: GitHub
• URL: https://github.com/adobe-rnd/helix-target-integration
• Owner: adobe-rnd
• License: apache-2.0
• Created: 2023-12-07T09:07:06.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-24T11:57:45.000Z (3 months ago)
• Last Synced: 2024-10-25T11:39:25.392Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 275 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Target VEC for Helix

The project is a proof of concept for integrating Target VEC with Helix.

## Environments

- Preview: https://main--helix-target-integration--adobe-rnd.hlx.page/

- Live: https://main--helix-target-integration--adobe-rnd.hlx.live/

## Adding Target integration to a Helix project

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

```

2. Add a call to `loadTargetOffers` to the 'loadPage' function as follows:

```js

async function loadPage() {

  loadTargetOffers('{Target Client Code}');

  await loadEager(document);

  await loadLazy(document);

  loadDelayed();

}

```

## CDN setup

We recommend using Cloudflare Workers to proxy all upstream requests to the Target and Helix origins. 

This allows you to use the same domain for both Helix and Target, which is required for archiving the best performance.

Please follow the instructions below to set up the proxy:

- Deploy the CF [worker](cloudflare/worker.js) to your Cloudflare account.

- Add the following environment variables to the worker:

  - `CLIENT` - your Target client code (e.g. `helix-target-integration`)

  - `HOST` - your Helix host (e.g. `dev--helix-target-integration--vtsaplin.hlx.page`)

## Installation

```sh

npm i

```

## Linting

```sh

npm run lint

```

## Local development

1. Create a new repository based on the `aem-boilerplate` template and add a mountpoint in the `fstab.yaml`

1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository

1. Install the [AEM CLI](https://github.com/adobe/aem-cli): `npm install -g @adobe/aem-cli`

1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)

1. Open the `{repo}` directory in your favorite IDE and start coding :)