From bb504b384a0787e4cffbfc92cc430c33ef5c9640 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 2 May 2024 16:53:44 -0400 Subject: [PATCH] moat data updates --- .changeset/fluffy-pots-notice.md | 8 ---- .../react-components/src/components/gif.tsx | 6 ++- .../src/components/moat-tracking.tsx | 24 ---------- .../react-components/stories/gif.stories.tsx | 25 ++--------- packages/util/src/construct-moat-data.ts | 44 ------------------- 5 files changed, 8 insertions(+), 99 deletions(-) delete mode 100644 .changeset/fluffy-pots-notice.md delete mode 100644 packages/react-components/src/components/moat-tracking.tsx delete mode 100644 packages/util/src/construct-moat-data.ts diff --git a/.changeset/fluffy-pots-notice.md b/.changeset/fluffy-pots-notice.md deleted file mode 100644 index d90fcbc4..00000000 --- a/.changeset/fluffy-pots-notice.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@giphy/react-components': minor -'@giphy/js-fetch-api': minor -'@giphy/js-types': minor -'@giphy/js-util': minor ---- - -Add moat ad tracking diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx index 9a865f92..d4aaa405 100644 --- 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) => ( +
+ ))} - {isAd && } {Overlay && ( // only render the overlay on the client since it depends on shouldShowMedia diff --git a/packages/react-components/src/components/moat-tracking.tsx b/packages/react-components/src/components/moat-tracking.tsx deleted file mode 100644 index 71b80bcb..00000000 --- a/packages/react-components/src/components/moat-tracking.tsx +++ /dev/null @@ -1,24 +0,0 @@ -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) - 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('&:')}` - return ( - <> - - - - ) - } - return null -} - -export default MoatTracking diff --git a/packages/react-components/stories/gif.stories.tsx b/packages/react-components/stories/gif.stories.tsx index 90ba4575..53d78b94 100644 --- 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: [ + '', + ], }, }, } diff --git a/packages/util/src/construct-moat-data.ts b/packages/util/src/construct-moat-data.ts deleted file mode 100644 index fdb7d2bc..00000000 --- a/packages/util/src/construct-moat-data.ts +++ /dev/null @@ -1,44 +0,0 @@ -type MoatData = { - moatClientLevel1: string - moatClientLevel2: string - moatClientLevel3: string - moatClientLevel4: string - moatClientSlicer1: string - moatClientSlicer2: string - zMoatPosition: string - zMoatSession?: string -} - -type Tracker = { - vendor: string - verificationParameters: any -} - -type TData = { - web?: Tracker[] -} - -export const constructMoatData = ({ tdata }: { tdata: TData }): MoatData | undefined => { - const [moatTrackerData] = tdata?.web?.filter((tracker) => tracker.vendor === 'Moat') || [] - if (moatTrackerData?.verificationParameters) { - const { - moatClientLevel1 = '_ADVERTISER_', - moatClientLevel2 = '_CAMPAIGN_', - moatClientLevel3 = '_LINE_ITEM_', - moatClientLevel4 = '_CREATIVE_', - moatClientSlicer1 = '_SITE_', - moatClientSlicer2 = '_PLACEMENT_', - zMoatPosition = '_POSITION_', - } = moatTrackerData.verificationParameters - - return { - moatClientLevel1, - moatClientLevel2, - moatClientLevel3, - moatClientLevel4, - moatClientSlicer1, - moatClientSlicer2, - zMoatPosition, - } - } -}