https://github.com/parcellab/cm-utils
Campaign manager utils for your e-commerce shop/app.
https://github.com/parcellab/cm-utils
campaign-manager campaigns ecommerce javascript-plugin parcellab team-frontend webpage
Last synced: 2 months ago
JSON representation
Campaign manager utils for your e-commerce shop/app.
- Host: GitHub
- URL: https://github.com/parcellab/cm-utils
- Owner: parcelLab
- Created: 2023-03-31T13:21:40.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-03T12:47:06.000Z (over 1 year ago)
- Last Synced: 2025-02-23T08:07:33.385Z (3 months ago)
- Topics: campaign-manager, campaigns, ecommerce, javascript-plugin, parcellab, team-frontend, webpage
- Language: JavaScript
- Size: 424 KB
- Stars: 0
- Watchers: 9
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# parcelLab© Campaign Manager Utils
Campaign manager utilities for your e-commerce shop/app.
## `` web component
Renders parcelLab campaign manager content in any website/shop/app.
For identifying what campaign to render you can pass either a parcelLab tracking-id or the component will try to identify the current tracking via the browsers URL search query in the manner of the parcelLab's order status page/track and trace plugin.
(e.g. `/order-tracking.html?tno=1234567&courier=dhl-germany`)
### Usage Browser (ESM)
For using the pl-cm-banner component, just import the es module somewhere in your website - and place the `` in your HTML, wherever you want to display the campaign manager banner:
As static JS bundle from the parcelLab CDN:
```html
```
Or as ESM Javascript Module, directly from unpkg package manager:
```html
```
### Usage with NPM (e.g. in React)
First install the @parcellab/cm-banner package:
```bash
npm i @parcellab/cm-utils
```
Import the component and use it just like a normal DOM element:
```javascript
// ...
import "@parcellab/cm-utils";
// ...
function Banner() {
const horizontalBannerType = "bannerHorizontal";
return (
);
}
```
### Props
> 💡 In HTML Components kebab-case-props will be transfered to camelCaseProps automatically. In React you can use camelCase.
```typescript
@Prop() trackingId: string;
// not requirerd
// eg.:
```
Sets the tracking id for which the campaign banner will be retrieved.
If not set - the plugin tries to identify the tracking by URL search/query params from the browser.
(just like the parcelLab track and trace plugin. - [see more infos here](https://how.parcellab.works/docs/order-status-page/configuration#using-the-tracking-plugin))
E.g. if the campaign banner component is implemented on the page `/orders.html`,
a user could be routed to `/orders.html?tno=1234567&courier=dhl-germany` to see the campaign for the tracking 1234567.
Because the parcellab track and trace plugin and the campaign manager component are using the same query parameters for identifying the tracking, you can just add the `` component to a page that hosts the parcellab track and trace plugin and it should automatically display the right campaign content if a user is viewing a order status page...
```typescript
@Prop() medium: string = "web";
// not requirerd
// eg.:
```
Sets the medium for which the campaign content will be retrieved.
Default: `web`.
```typescript
@Prop() contentType: string = "banner_order_status_page";
// not requirerd
// eg.:
```
Sets the content type of the retrieved campaignthat will be rendered.
Default: `banner_order_status_page`.
```typescript
@Prop() bannerType: string = "mainBannerVertical";
// not requirerd
// eg.:
```
Chooses what banner fomr the content type of the retrieved campaign will be rendered.
Default: `mainBannerVertical`.
```typescript
@Prop() language: string;
// not requirerd
// eg.:
```
Sets the users language - to prevent campaigns from different languages to be rendered.
Default: `undefined`