face-age 2.1.23 → 2.2.1

package/README.md

@@ -216,6 +216,86 @@ Enable or disable image uploads.
 
 Limit the types of skin issues displayed during analysis.
 
+## Analytics Integration
+
+Face Age supports integration with Google Analytics (GTM) and Facebook Pixel to track user interactions and conversions.
+
+### Google Analytics (GTM)
+
+To integrate Google Analytics, add the following options:
+
+```js
+const options = {
+  elementId: 'FaceAge-module',
+  faceageId: '<Face Age Client ID>',
+  gtag: 'G-XXXXXXXXXX', // Your Google Analytics Measurement ID
+  gtagInsert: true, // Optional: Automatically inject GTM script (default: true)
+  gtagDataLayer: window.dataLayer, // Optional: Custom dataLayer (default: window.dataLayer)
+};
+
+const faceAge = new FaceAge(options);
+faceAge.render();
+```
+
+#### GTM Options
+
+- **gtag** (`String`): Your Google Analytics Measurement ID (format: `G-XXXXXXXXXX`, `GT-XXXXXXXXXX`, or `GTM-XXXXXXXXXX`)
+- **gtagInsert** (`Boolean`, optional): Automatically inject the GTM script into the page. Default: `true`
+- **gtagDataLayer** (`Object`, optional): Custom dataLayer object. Default: `window.dataLayer`
+
+### Facebook Pixel
+
+To integrate Facebook Pixel, add the following options:
+
+```js
+const options = {
+  elementId: 'FaceAge-module',
+  faceageId: '<Face Age Client ID>',
+  fbPixel: '123456789012345', // Your Facebook Pixel ID
+  fbPixelInsert: true, // Optional: Automatically inject Facebook Pixel script (default: true)
+};
+
+const faceAge = new FaceAge(options);
+faceAge.render();
+```
+
+#### Facebook Pixel Options
+
+- **fbPixel** (`String`): Your Facebook Pixel ID (numeric string)
+- **fbPixelInsert** (`Boolean`, optional): Automatically inject the Facebook Pixel script into the page. Default: `true`
+
+### Using Both Analytics Services
+
+You can use both Google Analytics and Facebook Pixel simultaneously:
+
+```js
+const options = {
+  elementId: 'FaceAge-module',
+  faceageId: '<Face Age Client ID>',
+  gtag: 'G-XXXXXXXXXX',
+  gtagDataLayer: window.dataLayer,
+  fbPixel: '123456789012345',
+};
+
+const faceAge = new FaceAge(options);
+faceAge.render();
+```
+
+### Tracked Events
+
+Face Age automatically tracks the following user interactions:
+
+- Quiz start and completion
+- Quiz question views and choices
+- Skin analysis start
+- Photo selection and capture
+- Results view
+- Product views and interactions
+- Add to cart actions
+- Checkout button clicks
+- Modal open/close events
+- Download report actions
+
 ## API
 
 Once the image is analyzed, you can retrieve the results using the following commands:

package/dist/faceage.css

@@ -1677,15 +1677,15 @@ body {
 .face_age .facePosition #assertive {
     top: 0px;
     left: 20%;
-    color: white;
     width: 60%;
     bottom: 0;
     display: flex;
     padding: 7% 0 10px;
     position: absolute;
-    font-size: 22px;
     text-align: center;
     align-items: center;
+    color: white;
+    font-size: 22px;
     text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 2px;
     line-history: 34px;
     justify-content: center;