{"id":24559244,"url":"https://github.com/parcellab/cm-utils","last_synced_at":"2025-03-16T19:41:41.514Z","repository":{"id":151284271,"uuid":"621826228","full_name":"parcelLab/cm-utils","owner":"parcelLab","description":"Campaign manager utils for your e-commerce shop/app.","archived":false,"fork":false,"pushed_at":"2023-11-03T12:47:06.000Z","size":434,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-02-23T08:07:33.385Z","etag":null,"topics":["campaign-manager","campaigns","ecommerce","javascript-plugin","parcellab","team-frontend","webpage"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parcelLab.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null}},"created_at":"2023-03-31T13:21:40.000Z","updated_at":"2025-02-11T10:12:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"f762d95a-fe57-4101-8cb6-77c4346642ac","html_url":"https://github.com/parcelLab/cm-utils","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fcm-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fcm-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fcm-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fcm-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parcelLab","download_url":"https://codeload.github.com/parcelLab/cm-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243922337,"owners_count":20369382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["campaign-manager","campaigns","ecommerce","javascript-plugin","parcellab","team-frontend","webpage"],"created_at":"2025-01-23T06:16:01.625Z","updated_at":"2025-03-16T19:41:41.487Z","avatar_url":"https://github.com/parcelLab.png","language":"JavaScript","readme":"# parcelLab© Campaign Manager Utils\n\nCampaign manager utilities for your e-commerce shop/app.\n\n## `\u003cpl-cm-banner\u003e` web component\n\nRenders parcelLab campaign manager content in any website/shop/app.  \nFor 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.  \n(e.g. `/order-tracking.html?tno=1234567\u0026courier=dhl-germany`)\n\n### Usage Browser (ESM)\n\nFor using the pl-cm-banner component, just import the es module somewhere in your website - and place the `\u003cpl-cm-banner\u003e` in your HTML, wherever you want to display the campaign manager banner:\n\nAs static JS bundle from the parcelLab CDN:\n\n```html\n\u003c!-- ... --\u003e\n  \u003cscript src=\"https://cdn.parcellab.com/js/cm-utils/bundle.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003cdiv class=\"col\"\u003e\n    \u003cpl-cm-banner\u003e\u003c/pl-cm-banner\u003e\n  \u003cdiv/\u003e\n  \u003c!-- ... --\u003e\n```\n\nOr as ESM Javascript Module, directly from unpkg package manager:\n\n```html\n\u003c!-- ... --\u003e\n  \u003cscript type=\"module\" src=\"https://unpkg.com/@parcellab/cm-utils\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003cdiv class=\"col\"\u003e\n    \u003cpl-cm-banner\u003e\u003c/pl-cm-banner\u003e\n  \u003cdiv/\u003e\n  \u003c!-- ... --\u003e\n```\n\n### Usage with NPM (e.g. in React)\n\nFirst install the @parcellab/cm-banner package:\n\n```bash\nnpm i @parcellab/cm-utils\n```\n\nImport the component and use it just like a normal DOM element:\n\n```javascript\n// ...\nimport \"@parcellab/cm-utils\";\n// ...\nfunction Banner() {\n  const horizontalBannerType = \"bannerHorizontal\";\n  return (\n    \u003cdiv className=\"col\"\u003e\n      \u003cpl-cm-banner bannerType={horizontalBannerType}\u003e\u003c/pl-cm-banner\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Props\n\n\u003e 💡 In HTML Components kebab-case-props will be transfered to camelCaseProps automatically. In React you can use camelCase.\n\n\u003chr\u003e\n\n```typescript\n  @Prop() trackingId: string;\n  // not requirerd\n  // eg.:\n  \u003cpl-cm-banner tracking-id=\"xyz\"\u003e\n```\n\nSets the tracking id for which the campaign banner will be retrieved.  \nIf not set - the plugin tries to identify the tracking by URL search/query params from the browser.\n(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))  \nE.g. if the campaign banner component is implemented on the page `/orders.html`,  \na user could be routed to `/orders.html?tno=1234567\u0026courier=dhl-germany` to see the campaign for the tracking 1234567.  \nBecause 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 `\u003cpl-cm-banner\u003e` 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...\n\n\u003chr\u003e\n\n```typescript\n  @Prop() medium: string = \"web\";\n  // not requirerd\n  // eg.:\n  \u003cpl-cm-banner medium=\"email\"\u003e\n```\n\nSets the medium for which the campaign content will be retrieved.  \nDefault: `web`.\n\n\u003chr\u003e\n\n```typescript\n  @Prop() contentType: string = \"banner_order_status_page\";\n  // not requirerd\n  // eg.:\n  \u003cpl-cm-banner content-type=\"email_banner\"\u003e\n```\n\nSets the content type of the retrieved campaignthat will be rendered.  \nDefault: `banner_order_status_page`.\n\n\u003chr\u003e\n\n```typescript\n  @Prop() bannerType: string = \"mainBannerVertical\";\n  // not requirerd\n  // eg.:\n  \u003cpl-cm-banner banner-type=\"bannerHorizontal\"\u003e\n```\n\nChooses what banner fomr the content type of the retrieved campaign will be rendered.  \nDefault: `mainBannerVertical`.\n\n\u003chr\u003e\n\n```typescript\n  @Prop() language: string;\n  // not requirerd\n  // eg.:\n  \u003cpl-cm-banner language=\"en\"\u003e\n\n```\n\nSets the users language - to prevent campaigns from different languages to be rendered.  \nDefault: `undefined`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparcellab%2Fcm-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparcellab%2Fcm-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparcellab%2Fcm-utils/lists"}