examples

Author: alexanderkirtzel

website/docs/destinations/event_mapping.mdx

@@ -56,12 +56,7 @@ explicitly matched.
 
 <DestinationPush
   event={event}
-  height={'666px'}
-  labelMiddle={'Config'}
-  eventConfig={false}
-  smallText={true}
->
-  {`{
+  mapping={`{
     order: {
       complete: {
         name: "purchase",
@@ -101,7 +96,11 @@ explicitly matched.
       }
     }
   }`}
-</DestinationPush>
+  height={'666px'}
+  labelMiddle={'Config'}
+  eventConfig={false}
+  smallText={true}
+/>
 
 Change the `event` name to `order visible` and see how the batched mapping is
 applied after 1 second.

website/docs/destinations/google-ga4.mdx

@@ -92,22 +92,22 @@ ID</Link>.
 
 <DestinationInit
   custom={`{
-  measurementId: 'G-XXXXXXXXXX', // Required
-  debug: false,
-  include: ['globals'],
-  pageview: false,
-  data: {
-    map: {
-      currency: {
-        value: 'EUR',
-        key: 'data.currency',
+    measurementId: 'G-XXXXXXXXXX', // Required
+    debug: false,
+    include: ['globals'],
+    pageview: false,
+    data: {
+      map: {
+        currency: {
+          value: 'EUR',
+          key: 'data.currency',
+        },
       },
     },
-  },
-  server_container_url: 'https://server.example.com',
-  snakeCase: true,
-  transport_url: 'https://www.google-analytics.com/g/collect',
-}`}
+    server_container_url: 'https://server.example.com',
+    snakeCase: true,
+    transport_url: 'https://www.google-analytics.com/g/collect',
+  }`}
 />
 
 ### Custom
@@ -176,22 +176,26 @@ individual event mapping.
 
 ### add_to_cart
 
-Map your custom walkerOS event to get
-an&nbsp;<Link to="https://developers.google.com/analytics/devguides/collection/ga4/reference/events?sjid=10736118709897970414-EU&client_type=gtag#add_to_cart">add_to_cart
-gtag.js event</Link>.
+Map your walkerOS event to get
+an&nbsp;<Link to="https://developers.google.com/analytics/devguides/collection/ga4/reference/events?sjid=10736118709897970414-EU&client_type=gtag#add_to_cart">add_to_cart</Link>
+gtag.js event.
 
 <DestinationPush
+  smallText={true}
+  height={'512px'}
   event={getEvent('product add')}
   mapping={mapping.add_to_cart}
 />
 
 ### purchase
 
-Map your custom walkerOS event to get
-a&nbsp;<Link to="https://developers.google.com/analytics/devguides/collection/ga4/reference/events?sjid=10736118709897970414-EU&client_type=gtag#purchase">purchase
-gtag.js event</Link>.
+Map your walkerOS event to get
+a&nbsp;<Link to="https://developers.google.com/analytics/devguides/collection/ga4/reference/events?sjid=10736118709897970414-EU&client_type=gtag#purchase">purchase</Link>
+gtag.js event.
 
 <DestinationPush
+  smallText={true}
+  height={'542px'}
   event={getEvent('order complete')}
   mapping={mapping.purchase}
 />

website/docs/destinations/piwikpro.mdx

@@ -7,6 +7,19 @@ import PackageLink from '/src/components/docs/package-link';
 import Link from '@docusaurus/Link';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { getEvent } from '@elbwalker/utils';
+import {
+  DestinationContextProvider,
+  DestinationInit,
+  DestinationPush,
+} from '@site/src/components/organisms/liveDestination';
+import destinationPiwikPro from '@elbwalker/destination-web-piwikpro';
+import { mapping } from '@elbwalker/destination-web-piwikpro/examples';
+
+<DestinationContextProvider
+  destination={destinationPiwikPro}
+  fnName='_paq.push'
+>
 
 <PackageLink
   browser="@elbwalker/destination-web-piwikpro"
@@ -80,11 +93,6 @@ ID</Link> and URL.
 
 ```js
 const config = {
-  custom: {
-    appId: 'XXX-XXX-XXX-XXX-XXX', // Id of the site
-    // linkTracking: false, // Disable download and outlink tracking
-    url: 'https://your_account_name.piwik.pro/', // Same address as the login
-  },
   mapping: {
     order: {
       complete: {
@@ -113,6 +121,14 @@ const config = {
 };
 ```
 
+<DestinationInit
+  custom={`{
+    appId: 'XXX-XXX-XXX-XXX-XXX', // Id of the site
+    // linkTracking: false, // Disable download and outlink tracking
+    url: 'https://your_account_name.piwik.pro/', // Same address as the login
+  }`}
+/>
+
 ### Custom
 
 | Property     | Type    | Description                                    |
@@ -141,3 +157,57 @@ If you need professional support with your walkerOS implementation, check out
 our&nbsp;<Link to="/services">services</Link>.
 
 :::
+
+## Mapping
+
+You are able to map your walkerOS events to match the respective requirements of
+each vendor. The `mapping` examples are using a
+live&nbsp;<Link to="#configuration">configuration</Link>.
+
+:::tip
+
+The code examples are interactive. You can edit the code to generate your
+individual event mapping.
+
+:::
+
+### ecommerceProductDetailView
+
+Map your walkerOS event to get
+an&nbsp;<Link to="https://developers.piwik.pro/docs/ecommerceproductdetailview#examples">ecommerceProductDetailView</Link>
+event.
+
+<DestinationPush
+  smallText={true}
+  height={'512px'}
+  event={getEvent('product view')}
+  mapping={mapping.ecommerceProductDetailView}
+/>
+
+### ecommerceAddToCart
+
+Map your walkerOS event to get
+an&nbsp;<Link to="https://developers.piwik.pro/docs/ecommerceaddtocart#examples">ecommerceAddToCart</Link>
+event.
+
+<DestinationPush
+  smallText={true}
+  height={'512px'}
+  event={getEvent('product add')}
+  mapping={mapping.ecommerceAddToCart}
+/>
+
+### ecommerceOrder
+
+Map your walkerOS event to get
+an&nbsp;<Link to="https://developers.piwik.pro/docs/ecommerceorder#examples">ecommerceOrder</Link>
+event.
+
+<DestinationPush
+  smallText={true}
+  height={'512px'}
+  event={getEvent('order complete')}
+  mapping={mapping.ecommerceOrder}
+/>
+
+</DestinationContextProvider>