moat data updates

packages/react-components/src/components/moat-tracking.tsx

@@ -1,16 +1,24 @@
-import React from 'react'
 import { constructMoatData } from '@giphy/js-util'
+import React from 'react'
 
 type Props = { bottleData: any }
 
 export const MoatTracking = ({ bottleData }: Props) => {
     const moatCompatibleData = constructMoatData(bottleData as any)
-    // Constructing the URL with macros replaced by their values
-    const url = `https://z.moatads.com/giphyjsdisplay626459778035/moatad.js#${Object.entries(moatCompatibleData)
-        .map(([key, value]) => `${key}=${value}`)
-        .join('&')}`
-    const scriptTag = <script src={url} type="text/javascript"></script>
-    return scriptTag
+    if (moatCompatibleData) {
+        const partnerId = 'giphyjsdisplay626459778035'
+        const kvPairs = Object.entries(moatCompatibleData).map(([key, value]) => `${key}=${value}`)
+        // Constructing the URL with macros replaced by their values
+        const url = `https://z.moatads.com/${partnerId}/moatad.js#${kvPairs.join('&')}`
+        const noscriptClassName = `MOAT-${partnerId}?${kvPairs.join('&amp:')}`
+        return (
+            <>
+                <noscript className={noscriptClassName}></noscript>
+                <script src={url} type="text/javascript"></script>
+            </>
+        )
+    }
+    return null
 }
 
 export default MoatTracking

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,34 @@ export const GifWithOverlay: Story = {
     },
 }
 
+export const GifWithAd: Story = {
+    args: {
+        bottle_data: {
+            tid: 'd7494a8384b6906a880ff6dcc16a7151d3f2a3e8413be76e9ddb4ee1f8dc9fd0',
+            tags: [],
+            tdata: {
+                om: [],
+                bartab: [],
+                web: [
+                    {
+                        vendor: 'Moat',
+                        verificationParameters: {
+                            moatClientLevel1: 'Giphy',
+                            moatClientLevel2: 'Giphy',
+                            moatClientLevel3: 'Giphy',
+                            moatClientLevel4: 'Giphy',
+                            moatClientSlicer1: 'Giphy',
+                            moatClientSlicer2: 'Giphy',
+                            zMoatPosition: 'Giphy',
+                        },
+                    },
+                ],
+                click_out_url: '',
+            },
+        },
+    },
+}
+
 export const GifThatStretches: Story = {
     args: {
         percentWidth: '50%',

packages/util/src/index.ts

@@ -14,5 +14,4 @@ export {
 } from './gif-utils'
 export * from './log'
 export * from './sdk-headers'
-export { default as injectTrackingPixel } from './tracking-pixel'
 export { checkIfWebP } from './webp-check'