From d7bab79144a5a66963dfc9ca8ff7a14631207ca3 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/package.json | 2 - packages/util/src/construct-moat-data.ts | 44 ------------------- packages/util/src/index.ts | 1 - yarn.lock | 25 ----------- 8 files changed, 8 insertions(+), 127 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/package.json b/packages/util/package.json index a270fdcf..6771dd24 100644 --- a/packages/util/package.json +++ b/packages/util/package.json @@ -35,11 +35,9 @@ }, "dependencies": { "@giphy/js-types": "*", - "dompurify": "3.1.0", "uuid": "^9.0.0" }, "devDependencies": { - "@types/dompurify": "^2.0.4", "@types/uuid": "^8.3.0", "typescript": "^5.0.4" } 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, - } - } -} diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts index 41109bfa..7f02f3bf 100644 --- a/packages/util/src/index.ts +++ b/packages/util/src/index.ts @@ -1,6 +1,5 @@ export { default as bestfit, setRenditionScaleUpMaxPixels } from './bestfit' export * from './collections' -export * from './construct-moat-data' export { default as getClientRect } from './get-client-rect-from-el' export { default as getPingbackId } from './get-pingback-id' export { diff --git a/yarn.lock b/yarn.lock index 2e2c1423..67e995e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2549,9 +2549,7 @@ __metadata: resolution: "@giphy/js-util@workspace:packages/util" dependencies: "@giphy/js-types": "*" - "@types/dompurify": ^2.0.4 "@types/uuid": ^8.3.0 - dompurify: 3.1.0 typescript: ^5.0.4 uuid: ^9.0.0 languageName: unknown @@ -5164,15 +5162,6 @@ __metadata: languageName: node linkType: hard -"@types/dompurify@npm:^2.0.4": - version: 2.4.0 - resolution: "@types/dompurify@npm:2.4.0" - dependencies: - "@types/trusted-types": "npm:*" - checksum: b48cd81e997794ebc390c7c5bef1a67ec14a6f2f0521973e07e06af186c7583abe114d94d24868c0632b9573f5bd77131a4b76f3fffdf089ba99a4e53dd46c39 - languageName: node - linkType: hard - "@types/ejs@npm:^3.1.1": version: 3.1.2 resolution: "@types/ejs@npm:3.1.2" @@ -5651,13 +5640,6 @@ __metadata: languageName: node linkType: hard -"@types/trusted-types@npm:*": - version: 2.0.3 - resolution: "@types/trusted-types@npm:2.0.3" - checksum: 4794804bc4a4a173d589841b6d26cf455ff5dc4f3e704e847de7d65d215f2e7043d8757e4741ce3a823af3f08260a8d04a1a6e9c5ec9b20b7b04586956a6b005 - languageName: node - linkType: hard - "@types/unist@npm:^2.0.0": version: 2.0.7 resolution: "@types/unist@npm:2.0.7" @@ -9648,13 +9630,6 @@ __metadata: languageName: node linkType: hard -"dompurify@npm:3.1.0": - version: 3.1.0 - resolution: "dompurify@npm:3.1.0" - checksum: 06fc76607cd076e394b2ea5479ab6f0407b8fedb6877ae95e94207b878365e5e1cd914055dacce152a5f419818afb8d4cd284b780246cf35363f0747c179a0ba - languageName: node - linkType: hard - "domutils@npm:^1.5.1, domutils@npm:^1.7.0": version: 1.7.0 resolution: "domutils@npm:1.7.0"