--- title: Cleverpush slug: experience/cleverpush description: Find official websites, developer integrations, and tracking services for Cleverpush on Android and iOS. Learn how to configure actions, views, purchases, and attributes using "tracking_config.json." Includes templates for each event and additional functi docTags: createdAt: 2023-06-30T14:37:29.548Z --- # Summary ## Official websites | **Site** | **URL** | | ------------- | ------------------------------------------------------------------------ | | Website | [https://cleverpush.com/](https://cleverpush.com/de/) | | Documentation | [https://developers.cleverpush.com/](https://developers.cleverpush.com/) | ## Developer integrations | **Platform** | **URL** | | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | | Android | [https://github.com/cleverpush/cleverpush-android-sdk](https://github.com/cleverpush/cleverpush-android-sdk) | | iOS | [https://github.com/cleverpush/cleverpush-ios-sdk](https://github.com/cleverpush/cleverpush-ios-sdk) | | Web | not supported by Purple.
Web integration may be done via [Widget Component](docId\:H1jHhES1Y7uNRU3wV6smd). | # Tracking service ## Event support matrix Overview of the supported events and their configuration. | | **Templates** | **Parameter** | | ------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------ | | **Actions** | *action* | not supported | | **Views** | *name* | supported | | **Purchases** | *action* | not supported | | **Attributes*** | *name* | not supported | (*) Tracking of **Attributes** follows a special handling. More detailed information can be found below in the description of the configuration for attributes. ## General structure in tracking\_config.json :::hint{type="info"} Tracking service key name in "*tracking\_config.json*" is: "**cleverpush**" ::: :::CodeblockTabs General structure ```json { "cleverpush": { "eventsEnabledByDefault": true, "viewsEnabledByDefault": true, "purchasesEnabledByDefault": true, "attributesEnabledByDefault": true, "events": { // your configured list of events }, "views": { // your configured list of events }, "purchases": { // your configured list of events }, "attributes": { // your configured list of attributes } } } ``` ::: ## Event configuration ### Actions Cleverpush supports action events. :::CodeblockTabs Action event ```json "action_event_key": { "templates": { "action": "value of template" } } ``` Example ```json "ISSUE_DOWNLOADED": { "templates": { "action": "issue_downloaded" } } ``` ::: :::hint{type="warning"} Action events have to be configured in the Cleverpush frontend first. ::: ### Views Cleverpush supports view events. :::CodeblockTabs View event ```json "view_event_key": { "templates": { "name": "value of template" }, "parameters": { "parameter_key_1": "value of parameter", // your configured list of parameters } } ``` Example 1 ```json "STOREFRONT_FEED": { "templates": { "name": "/feed" } } ``` Example 2 ```json "APP_MENU": { "templates": { "name": "/app/menu" } } ``` Example 3 ```json "ISSUE_CONTENT": { "templates": { "name": "/issue/{{ISSUE_ID}}" }, "parameters": { "issue_name": "{{ISSUE_NAME}}" } } ``` ::: ### Purchases Cleverpush supports purchase events. :::CodeblockTabs Purchase event ```json "purchase_event_key": { "templates": { "action": "value of template" } } ``` Example ```json "STOREFRONT_SUBSCRIPTION_PURCHASED": { "templates": { "action": "subscription_purchased_{{PRODUCT_ID}}" } } ``` ::: Purchase events are tracked by using the same API as action events. Except for one difference: The amount of the product price is added automatically to this event. :::hint{type="warning"} Purchase events have to be configured in the Cleverpush frontend first. ::: ### Attributes Cleverpush supports attributes. :::CodeblockTabs Attribute ```json "attribute_key": { "templates": { "name": "value of template" } } ``` Example boolean-value ```json "HAS_ACTIVE_SUBSCRIPTION": { "templates": { "name": "FfgfGT6ZJzffg4Bfm" } } ``` Example string-value ```json "MY_STRING_ATTRIBUTE": { "templates": { "name": "my_string_attribute" } } ``` ::: **Templates** Cleverpush distinguish between tags and attributes. Purple's implementation uses that as follows: Boolean attributes will set **tags** in Cleverpush while string attributes are saved as **attribute**. Both variants have its own requirements to its template value. :::hint{type="warning"} Attributes and tags both have to be configured in the Cleverpush frontend first. ::: | **Variant** | **Template key** | **Template value** | | -------------- | ----------------------------------- | ----------------------------------------------------- | | Boolean-value | *name* | The value has to be the **id** of the **tag**. | | String-value | *name* | The value has to be the **key** of the **attribute**. | ## Additional supported functionality ### Topics | **Topics** | | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | Android | [https://developers.cleverpush.com/docs/sdks/android/methods#topics](https://developers.cleverpush.com/docs/sdks/android/methods#topics) | | iOS | [https://developers.cleverpush.com/docs/sdks/ios/methods#topics](https://developers.cleverpush.com/docs/sdks/ios/methods#topics) | To enhance this feature an action URL is provided by Purple: | **Action URL** | **Description** | | -------------------------------------------------------------------- | --------------------- | | **purple://app/cleverpush/topics/open** | Open the topics view. | This action URL is filtered from the app menu when Cleverpush is not enabled. # How to configure ## Native Purple App Any native Tracking Service is configured in the **Purple Manager.** ### Enable SDK :::hint{type="info"} ***Settings location*** "**Your app**" => "**Consent/Push/Analytics**" => "**Analytics (General/iOS/Android/Web)**" ::: | **Setting** | **Description** | | ------------------------- | ----------------------------------------------------------------- | | **Enable Cleverpush** | To enable the Cleverpush SDK in your app, activate this checkbox. | | **CleverPush Channel ID** | The Cleverpush channel id. | ### Apple privacy / ATT :::hint{type="info"} ***Settings location*** "**Your app**" => "**Consent/Push/Analytics**" => "**Privacy**" ::: ### Consent management :::hint{type="info"} **Settings location:** "**Your app**" => "**Consent/Push/Analytics**" => "**Consent Management**" ::: | **Setting** | **Description** | | ---------------------------- | ------------------------------------------------------------- | | **Vendor-ID for Cleverpush** | The Vendor-ID is provided by the consent management platform. | ## Web integration Purple does not support Cleverpush web integration. **Experimental Support** can be achieved by adding cleverpushes loaderscript and cleverpush service worker via dynamic resources: ### Insert loader script as generic widget (**recommended**) ... todo via `experience.config.json` ```json "scripts": { "head": [ { "src": "https://static.cleverpush.com/channel/loader/[channel_id].js", "type": "text/javascript", "async": true } ] } ``` via custom.js ```javascript function loadCleverPushSnippet() { const cleverpushSnippet = document.createElement('script'); cleverpushSnippet.src = 'https://static.cleverpush.com/channel/loader/[channel_id].js'; cleverpushSnippet.async = true; cleverpushSnippet.dataset.clientSideAppended = true; document.head.appendChild(cleverpushSnippet); } loadCleverPushSnippet(); ``` Add cleverpush service worker entry point file in a public accessible dir create a file \`cleverpush-worker.js\` with these contents ```javascript importScripts('https://static.cleverpush.com/channel/worker/[channel_id].js' + self.location.search); ``` one possible location is in dynamic resources: `/default/storefront/assets/cleverpush-worker.js` the public adress of this file will be: \`https\://\[webroot-of-purple-app]/delivery/web/dynamicResources/\[purple-app-id]/storefront/assets/cleverpush-worker.js\[?preview=true]\` this path needs to be configured in cleverpush admin (https\://app.cleverpush.com) find settings `platform -> web push -> general -> operation mode` there is an input `Set own file paths` insert above public path (starting with `/delivery...` ### Test Integration After completed integration steps, in frontend of the app look for push notification permission prompt (e.g. "your website wants to send you notifications. Allow?") ::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/nxiYhI92VXmUjoyYuYDGJ_image.png" size="68" width="1010" height="408" position="flex-start" showCaption="false"} Go to cleverpush admin find settings `platform -> web push -> analyzation -> subscriptions` ### Troubleshooting **Cleverpush does no accept the worker file path (e.g. cannot find file at the path or similar error)** Make sure cleverpush services does not access a cached version of the purple app (e.g. cloudeflare), clear cloudfront cache in manager settings of the app (experience settings) **Cleverpush UI does not show in frontend** if ui does not show, in browser console try \`\[window.]CleverPush.CleverPush.triggerOptIn()\`