Merge pull request #440 from Giphy/feat/PG-1411

add moat tracking
Giphy · May 3, 2024 · fd0de34 · fd0de34
2 parents fa9d77b + 6090bfa
commit fd0de34
Show file tree

Hide file tree

Showing 8 changed files with 240 additions and 220 deletions.
diff --git a/.changeset/witty-singers-chew.md b/.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
diff --git a/package.json b/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",

diff --git a/packages/fetch-api/src/normalize/gif.ts b/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
 }
diff --git a/packages/react-components/src/components/gif.tsx b/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

diff --git a/packages/react-components/stories/gif.stories.tsx b/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%',

diff --git a/packages/types/src/gif.ts b/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

diff --git a/packages/util/package.json b/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"
  }