moat data updates

Giphy · May 2, 2024 · bb504b3 · bb504b3
1 parent d1851ca
commit bb504b3
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 99 deletions.
diff --git a/.changeset/fluffy-pots-notice.md b/.changeset/fluffy-pots-notice.md
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
@@ -2,7 +2,6 @@
 import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import { IGif, IUser, ImageAllTypes } from '@giphy/js-types'
 import { Logger, getAltText, getBestRendition, getGifHeight } from '@giphy/js-util'
-import MoatTracking from './moat-tracking'
 import 'intersection-observer'
 import React, { ElementType, ReactNode, SyntheticEvent, useContext, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -290,8 +289,11 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
+                {isAd &&
+                    bottleData?.tags?.map((tag: string, index: number) => (
+                        <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
+                    ))}
             </picture>
-            {isAd && <MoatTracking bottleData={bottleData} />}
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia
                 <RenderOnClient>

diff --git a/packages/react-components/src/components/moat-tracking.tsx b/packages/react-components/src/components/moat-tracking.tsx
diff --git a/packages/react-components/stories/gif.stories.tsx b/packages/react-components/stories/gif.stories.tsx
@@ -106,27 +106,10 @@ 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: '',
-            },
+            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>',
+            ],
         },
     },
 }

diff --git a/packages/util/src/construct-moat-data.ts b/packages/util/src/construct-moat-data.ts