add moat tracking

.changeset/witty-singers-chew.md

@@ -0,0 +1,11 @@
+---
+'@giphy/react-components': minor
+'@giphy/js-fetch-api': minor
+'@giphy/js-types': minor
+'@giphy/js-util': minor
+---
+
+- moat tracking in react components 
+- remove unused deps in util 
+- append bottle data in fetch-api 
+- update types for gif to include bottle_data

package.json

@@ -31,7 +31,7 @@
     },
     "private": true,
     "devDependencies": {
-        "@changesets/cli": "^2.26.1",
+        "@changesets/cli": "^2.27.1",
         "@types/jest": "^29.5.1",
         "@types/node": "^20.1.2",
         "@typescript-eslint/eslint-plugin": "^5.59.5",

packages/fetch-api/src/normalize/gif.ts

@@ -29,10 +29,14 @@ type Tag = { text: string }
 // tags sometimes are objects that have a text prop, sometimes they're strings
 const getTag = (tag: Tag | string) => (typeof tag === 'string' ? (tag as string) : (tag as Tag).text)
 
-const normalize = (gif: any) => {
+const normalize = (gif: any, responseId: string = '') => {
     const newGif: IGif = { ...gif }
     newGif.id = String(newGif.id)
     newGif.tags = (newGif.tags || []).map(getTag)
+    if (!newGif.bottle_data) {
+        newGif.bottle_data = {} as any
+    }
+    newGif.response_id = responseId
     BOOL_PROPS.forEach(makeBool(newGif))
     Object.keys(newGif.images || {}).forEach((name: string) => {
         const img = newGif.images[name]
@@ -53,14 +57,16 @@ const normalize = (gif: any) => {
  * @hidden
  */
 export const normalizeGif = (result: GifResult) => {
-    result.data = normalize(result.data)
+    const { response_id } = result.meta
+    result.data = normalize(result.data, response_id)
     return result
 }
 
 /**
  * @hidden
  */
 export const normalizeGifs = (result: GifsResult) => {
-    result.data = result.data.map((gif) => normalize(gif))
+    const { response_id } = result.meta
+    result.data = result.data.map((gif) => normalize(gif, response_id))
     return result
 }

packages/react-components/src/components/gif.tsx

@@ -88,6 +88,7 @@ const RenderOnClient = ({ children }: { children: ReactNode }) => {
 
 const Gif = ({
     gif,
+    gif: { bottle_data: bottleData = {} },
     width,
     percentWidth,
     height: forcedHeight,
@@ -129,6 +130,8 @@ const Gif = ({
     const hoverTimeout = useRef<number>()
     // fire onseen ref (changes per gif, so need a ref)
     const sendOnSeen = useRef<(_: IntersectionObserverEntry) => void>(noop)
+    // are we displaying an ad
+    const isAd = Object.keys(bottleData).length > 0
     // custom pingback
     const { attributes } = useContext(PingbackContext)
     // user's overlay
@@ -284,6 +287,10 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
+                {isAd &&
+                    bottleData?.tags?.map((tag: string, index: number) => (
+                        <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
+                    ))}
             </picture>
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia

packages/react-components/stories/gif.stories.tsx

@@ -19,14 +19,27 @@ type GifComponentProps = React.ComponentProps<typeof GifComponent>
 type GifDemoProps = Omit<GifComponentProps, 'gif'> & {
     id: string
     scale: string
+    bottle_data: IGif['bottle_data']
 }
 
-
-const GifDemo = ({ id, width, height, noLink, borderRadius, percentWidth, overlay, ...other }: GifDemoProps) => {
+const GifDemo = ({
+    id,
+    width,
+    height,
+    noLink,
+    borderRadius,
+    percentWidth,
+    overlay,
+    bottle_data,
+    ...other
+}: GifDemoProps) => {
     const [gif, setGif] = useState<IGif>()
 
     const fetch = useCallback(async () => {
         const { data: gif } = await gf.gif(id)
+        if (bottle_data) {
+            gif.bottle_data = bottle_data
+        }
         setGif(gif)
     }, [id])
 
@@ -90,6 +103,17 @@ export const GifWithOverlay: Story = {
     },
 }
 
+export const GifWithAd: Story = {
+    args: {
+        bottle_data: {
+            tid: '8691c382d3eed000da83ecc2ceef747b91190ab0e5bc0bc95ff5c80eeda242fa',
+            tags: [
+                '<noscript class="MOAT-giphydisplay879451385633?moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&amp;moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&amp;moatClientLevel3=82&amp;moatClientLevel4=3o7WIw8TV4UJROSElW&amp;moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&amp;moatClientSlicer2=giphytrending"></noscript><script src="https://z.moatads.com/giphydisplay879451385633/moatad.js#moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&moatClientLevel3=82&moatClientLevel4=3o7WIw8TV4UJROSElW&moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&moatClientSlicer2=giphytrending" type="text/javascript"></script>',
+            ],
+        },
+    },
+}
+
 export const GifThatStretches: Story = {
     args: {
         percentWidth: '50%',

packages/types/src/gif.ts

@@ -29,6 +29,8 @@ export default interface IGif {
     is_scheduled: boolean
     is_removed: boolean
     tags: string[]
+    bottle_data: any
+    response_id: string
     analytics_response_payload: string
     video?: IVideo
     emoji_group_id?: number

packages/util/package.json

@@ -35,11 +35,9 @@
     },
     "dependencies": {
         "@giphy/js-types": "*",
-        "dompurify": "^2.2.2",
         "uuid": "^9.0.0"
     },
     "devDependencies": {
-        "@types/dompurify": "^2.0.4",
         "@types/uuid": "^8.3.0",
         "typescript": "^5.0.4"
     }