admesh-ui-sdk 0.16.6 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/INTEGRATION_GUIDE.md +6 -9
- package/README.md +152 -307
- package/dist/components/AdMeshEcommerceCards.d.ts +3 -4
- package/dist/components/AdMeshEcommerceCards.d.ts.map +1 -1
- package/dist/components/AdMeshLayout.d.ts.map +1 -1
- package/dist/components/AdMeshProductCard.d.ts.map +1 -1
- package/dist/components/AdMeshSummaryLayout.d.ts.map +1 -1
- package/dist/components/AdMeshViewabilityTracker.d.ts +52 -0
- package/dist/components/AdMeshViewabilityTracker.d.ts.map +1 -0
- package/dist/hooks/useViewabilityTracker.d.ts +19 -0
- package/dist/hooks/useViewabilityTracker.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1214 -864
- package/dist/index.mjs.map +1 -1
- package/dist/types/analytics.d.ts +242 -0
- package/dist/types/analytics.d.ts.map +1 -0
- package/dist/types/index.d.ts +5 -15
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/viewabilityTracker.d.ts +73 -0
- package/dist/utils/viewabilityTracker.d.ts.map +1 -0
- package/package.json +1 -1
package/INTEGRATION_GUIDE.md
CHANGED
|
@@ -59,8 +59,7 @@ function App() {
|
|
|
59
59
|
|
|
60
60
|
```jsx
|
|
61
61
|
// pages/recommendations.js
|
|
62
|
-
import { AdMeshLayout } from '
|
|
63
|
-
import '@admesh/ui-sdk/dist/ui-sdk.css';
|
|
62
|
+
import { AdMeshLayout } from 'admesh-ui-sdk';
|
|
64
63
|
|
|
65
64
|
export default function RecommendationsPage({ recommendations }) {
|
|
66
65
|
const handleProductClick = (adId, admeshLink) => {
|
|
@@ -104,8 +103,7 @@ export async function getServerSideProps() {
|
|
|
104
103
|
```jsx
|
|
105
104
|
// src/App.jsx
|
|
106
105
|
import { useState, useEffect } from 'react';
|
|
107
|
-
import { AdMeshLayout } from '
|
|
108
|
-
import '@admesh/ui-sdk/dist/ui-sdk.css';
|
|
106
|
+
import { AdMeshLayout } from 'admesh-ui-sdk';
|
|
109
107
|
|
|
110
108
|
function App() {
|
|
111
109
|
const [recommendations, setRecommendations] = useState([]);
|
|
@@ -163,8 +161,7 @@ export default App;
|
|
|
163
161
|
<script>
|
|
164
162
|
import { createRoot } from 'react-dom/client';
|
|
165
163
|
import { createElement } from 'react';
|
|
166
|
-
import { AdMeshLayout } from '
|
|
167
|
-
import '@admesh/ui-sdk/dist/ui-sdk.css';
|
|
164
|
+
import { AdMeshLayout } from 'admesh-ui-sdk';
|
|
168
165
|
|
|
169
166
|
export default {
|
|
170
167
|
name: 'RecommendationsWidget',
|
|
@@ -308,7 +305,7 @@ const handleProductClick = (adId, admeshLink) => {
|
|
|
308
305
|
> **Important**: Individual components no longer show disclosures. Use AdMeshLayout for platform integration to ensure FTC compliance.
|
|
309
306
|
|
|
310
307
|
```jsx
|
|
311
|
-
import { AdMeshProductCard,
|
|
308
|
+
import { AdMeshProductCard, AdMeshEcommerceCards } from 'admesh-ui-sdk';
|
|
312
309
|
|
|
313
310
|
// Use individual cards (no disclosures - for internal use only)
|
|
314
311
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@@ -340,7 +337,7 @@ import { AdMeshProductCard, AdMeshCompareTable } from '@admesh/ui-sdk';
|
|
|
340
337
|
Make sure to import the CSS file:
|
|
341
338
|
|
|
342
339
|
```jsx
|
|
343
|
-
import
|
|
340
|
+
// Styles are automatically injected - no CSS import needed
|
|
344
341
|
```
|
|
345
342
|
|
|
346
343
|
### TypeScript Errors
|
|
@@ -356,7 +353,7 @@ npm install --save-dev @types/react @types/react-dom
|
|
|
356
353
|
Use tree shaking to import only what you need:
|
|
357
354
|
|
|
358
355
|
```jsx
|
|
359
|
-
import { AdMeshLayout } from '
|
|
356
|
+
import { AdMeshLayout } from 'admesh-ui-sdk';
|
|
360
357
|
```
|
|
361
358
|
|
|
362
359
|
## 📱 Responsive Design
|