From 7f370cd8fd48a6289653ea9150c21ed5f7bf5212 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 8 Apr 2024 13:06:25 -0700 Subject: [PATCH 01/28] Readded moat to react sdk --- packages/components/package.json | 3 +- packages/components/src/components/gif.tsx | 51 ++++++++++++++++++++-- 2 files changed, 49 insertions(+), 5 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 5cff0f49..dbdade24 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -35,9 +35,10 @@ "@giphy/js-fetch-api": "*", "@giphy/js-types": "*", "@giphy/js-util": "*", + "@giphy/moat-loader": "^2.0.1", "bricks.js": "^1.8.0", "intersection-observer": "^0.11.0", "preact": "10.4.8", "throttle-debounce": "^3.0.1" } -} +} \ No newline at end of file diff --git a/packages/components/src/components/gif.tsx b/packages/components/src/components/gif.tsx index f4ff018c..020f9028 100644 --- a/packages/components/src/components/gif.tsx +++ b/packages/components/src/components/gif.tsx @@ -1,6 +1,7 @@ import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/js-brand' import { IGif, ImageAllTypes, IUser } from '@giphy/js-types' -import { getAltText, getBestRendition, getGifHeight, Logger } from '@giphy/js-util' +import { getAltText, getBestRendition, getGifHeight, Logger, constructMoatData, injectTrackingPixel } from '@giphy/js-util' +import moat from '@giphy/moat-loader' import { css, cx } from '@emotion/css' import { h } from 'preact' import { useContext, useEffect, useRef, useState } from 'preact/hooks' @@ -9,6 +10,7 @@ import AttributionOverlay from './attribution/overlay' import VerifiedBadge from './attribution/verified-badge' import { PingbackContext } from './pingback-context-manager' +const moatLoader = moat.loadMoatTag('giphydisplay879451385633') const gifCss = css` display: block; &:focus { @@ -73,10 +75,11 @@ export type Props = GifProps & EventProps const placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' -const noop = () => {} +const noop = () => { } const Gif = ({ gif, + gif: { bottle_data: bottleData = {} }, width, height: forcedHeight, onGifRightClick = noop, @@ -112,6 +115,10 @@ const Gif = ({ const hoverTimeout = useMutableRef() // fire onseen ref (changes per gif, so need a ref) const sendOnSeen = useRef<(_: IntersectionObserverEntry) => void>(noop) + // moat ad number + const moatAdNumber = useMutableRef() + // are we displaying an ad + const isAd = Object.keys(bottleData).length > 0 // custom pingback const { attributes } = useContext(PingbackContext) @@ -152,7 +159,19 @@ const Gif = ({ fullGifObserver.current.disconnect() } } - + const trackWithMoat = async () => { + if (shouldShowMedia && container.current) { + const { bottle_data: bottleData, response_id } = gif + const moatCompatibleData = constructMoatData(bottleData as any) + if (moatCompatibleData) { + moatCompatibleData.zMoatSession = response_id + await moatLoader + if (container.current) { + moatAdNumber.current = moat.startTracking(container.current, moatCompatibleData) + } + } + } + } const onImageLoad = (e: Event) => { if (!fullGifObserver.current) { fullGifObserver.current = new IntersectionObserver( @@ -168,6 +187,12 @@ const Gif = ({ // observe img for full gif view fullGifObserver.current.observe(container.current) } + if (isAd) { + if (moatAdNumber.current === undefined) { + trackWithMoat() + } + injectTrackingPixel(bottleData.tags) + } onGifVisible(gif, e) // gif is visible, perhaps just partially setLoadedClassName(Gif.imgLoadedClassName) } @@ -179,6 +204,23 @@ const Gif = ({ setHasFiredSeen(false) }, [gif.id]) + const stopTracking = () => { + // if we have a moat ad number + if (moatAdNumber.current !== undefined) { + // stop tracking + moat.stopTracking(moatAdNumber.current) + // remove the moat ad number + moatAdNumber.current = undefined + } + } + + // if this component goes from showing an ad to not an ad + useEffect(() => { + if (!shouldShowMedia) { + stopTracking() + } + }, [shouldShowMedia]) + useEffect(() => { showGifObserver.current = new IntersectionObserver(([entry]: IntersectionObserverEntry[]) => { const { isIntersecting } = entry @@ -195,6 +237,7 @@ const Gif = ({ if (showGifObserver.current) showGifObserver.current.disconnect() if (fullGifObserver.current) fullGifObserver.current.disconnect() if (hoverTimeout.current) clearTimeout(hoverTimeout.current) + stopTracking() } }, []) const height = forcedHeight || getGifHeight(gif, width) @@ -238,7 +281,7 @@ const Gif = ({ width={width} height={height} alt={getAltText(gif)} - onLoad={shouldShowMedia ? onImageLoad : () => {}} + onLoad={shouldShowMedia ? onImageLoad : () => { }} /> {shouldShowMedia ? ( From 9188331d8fcbde44f780afd1392cacbbbd70de44 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 8 Apr 2024 13:07:37 -0700 Subject: [PATCH 02/28] updated package.json --- packages/components/package.json | 2 +- yarn.lock | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index dbdade24..d582cd8b 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -41,4 +41,4 @@ "preact": "10.4.8", "throttle-debounce": "^3.0.1" } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index dd758ae5..ff96f0ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2512,6 +2512,7 @@ __metadata: "@giphy/js-fetch-api": "*" "@giphy/js-types": "*" "@giphy/js-util": "*" + "@giphy/moat-loader": ^2.0.1 "@types/bricks.js": ^1.8.1 "@types/throttle-debounce": ^2.1.0 bricks.js: ^1.8.0 @@ -2558,6 +2559,13 @@ __metadata: languageName: unknown linkType: soft +"@giphy/moat-loader@npm:^2.0.1": + version: 2.0.1 + resolution: "@giphy/moat-loader@npm:2.0.1" + checksum: 9d35fe2baee8efe5d6aa7619d2de346a63422e81127d587e28f23d49f9d540ec339e6765444c1f892c116f093b1f632b78754f570ac489fdaeebbe51014d81ca + languageName: node + linkType: hard + "@giphy/react-components@workspace:packages/react-components": version: 0.0.0-use.local resolution: "@giphy/react-components@workspace:packages/react-components" From 646b41cdb650c495113dc9d5bfd43f31d217f25b Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 8 Apr 2024 13:08:59 -0700 Subject: [PATCH 03/28] Added changeset --- .changeset/swift-owls-sin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/swift-owls-sin.md diff --git a/.changeset/swift-owls-sin.md b/.changeset/swift-owls-sin.md new file mode 100644 index 00000000..796ec45e --- /dev/null +++ b/.changeset/swift-owls-sin.md @@ -0,0 +1,5 @@ +--- +'@giphy/js-components': minor +--- + +Readded MOAT tracking to react-sdk From cf88c55e769916f865c431212dee42afeebece07 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 8 Apr 2024 13:33:29 -0700 Subject: [PATCH 04/28] Restored tracking pixel helper methods for js-util --- packages/util/src/index.ts | 1 + packages/util/src/tracking-pixel.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 packages/util/src/tracking-pixel.ts diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts index 7f02f3bf..b786ccfa 100644 --- a/packages/util/src/index.ts +++ b/packages/util/src/index.ts @@ -13,4 +13,5 @@ export { } from './gif-utils' export * from './log' export * from './sdk-headers' +export { default as injectTrackingPixel } from './tracking-pixel' export { checkIfWebP } from './webp-check' diff --git a/packages/util/src/tracking-pixel.ts b/packages/util/src/tracking-pixel.ts new file mode 100644 index 00000000..b241fe12 --- /dev/null +++ b/packages/util/src/tracking-pixel.ts @@ -0,0 +1,15 @@ +import { sanitize } from 'dompurify' + +const injectTrackingPixel = (tags: string[] = []) => { + tags.forEach((tag) => { + const el = document.createElement('html') + tag = tag.replace('%%CACHEBUSTER%%', Date.now().toString()) + el.innerHTML = sanitize(tag) + const pixel = el.querySelector('img') + if (pixel) { + document?.querySelector('head')?.appendChild(pixel) + } + }) +} + +export default injectTrackingPixel From 07ef010750cefb6542c411bdde700502f3464082 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:03:20 -0700 Subject: [PATCH 05/28] Restored construct moat data file --- .../src/util/construct-moat-data.ts | 44 +++++++++++++++++++ packages/util/src/index.ts | 1 + 2 files changed, 45 insertions(+) create mode 100644 packages/components/src/util/construct-moat-data.ts diff --git a/packages/components/src/util/construct-moat-data.ts b/packages/components/src/util/construct-moat-data.ts new file mode 100644 index 00000000..fdb7d2bc --- /dev/null +++ b/packages/components/src/util/construct-moat-data.ts @@ -0,0 +1,44 @@ +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 b786ccfa..20245dc3 100644 --- a/packages/util/src/index.ts +++ b/packages/util/src/index.ts @@ -1,5 +1,6 @@ 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 { From 1fa6889a7ae182aec977466e0d017652bbdcd4b0 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:09:47 -0700 Subject: [PATCH 06/28] relocated construct moat data file --- packages/{components/src/util => util/src}/construct-moat-data.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/{components/src/util => util/src}/construct-moat-data.ts (100%) diff --git a/packages/components/src/util/construct-moat-data.ts b/packages/util/src/construct-moat-data.ts similarity index 100% rename from packages/components/src/util/construct-moat-data.ts rename to packages/util/src/construct-moat-data.ts From ae41ba8684a62a86661c5aab5d0bab694a5f8eb9 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:17:27 -0700 Subject: [PATCH 07/28] Restored bottle_data to igif type --- packages/components/src/components/gif.tsx | 15 +++++++++++---- packages/types/src/gif.ts | 6 ++++++ 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/gif.tsx b/packages/components/src/components/gif.tsx index 020f9028..6876f28f 100644 --- a/packages/components/src/components/gif.tsx +++ b/packages/components/src/components/gif.tsx @@ -1,6 +1,13 @@ import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/js-brand' import { IGif, ImageAllTypes, IUser } from '@giphy/js-types' -import { getAltText, getBestRendition, getGifHeight, Logger, constructMoatData, injectTrackingPixel } from '@giphy/js-util' +import { + getAltText, + getBestRendition, + getGifHeight, + Logger, + constructMoatData, + injectTrackingPixel, +} from '@giphy/js-util' import moat from '@giphy/moat-loader' import { css, cx } from '@emotion/css' import { h } from 'preact' @@ -10,7 +17,7 @@ import AttributionOverlay from './attribution/overlay' import VerifiedBadge from './attribution/verified-badge' import { PingbackContext } from './pingback-context-manager' -const moatLoader = moat.loadMoatTag('giphydisplay879451385633') +const moatLoader = moat.loadMoatTag('giphydisplay879451385633', 'https://giphyscripts.s3.amazonaws.com/moat/moatad.js') const gifCss = css` display: block; &:focus { @@ -75,7 +82,7 @@ export type Props = GifProps & EventProps const placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' -const noop = () => { } +const noop = () => {} const Gif = ({ gif, @@ -281,7 +288,7 @@ const Gif = ({ width={width} height={height} alt={getAltText(gif)} - onLoad={shouldShowMedia ? onImageLoad : () => { }} + onLoad={shouldShowMedia ? onImageLoad : () => {}} /> {shouldShowMedia ? ( diff --git a/packages/types/src/gif.ts b/packages/types/src/gif.ts index fbbae1f3..f9e7683b 100644 --- a/packages/types/src/gif.ts +++ b/packages/types/src/gif.ts @@ -2,6 +2,11 @@ import { IImages } from './images' import IUser from './user' import IVideo from './video' +interface IBottleData { + tid?: string + tags?: string[] +} + export type GifID = string | number export default interface IGif { @@ -29,6 +34,7 @@ export default interface IGif { is_scheduled: boolean is_removed: boolean tags: string[] + bottle_data: IBottleData analytics_response_payload: string video?: IVideo emoji_group_id?: number From f074f038eca5979fe7a4f38a5a714c9415a81bba Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:18:45 -0700 Subject: [PATCH 08/28] altered syntax for stopping tracking on unmount --- packages/components/src/components/gif.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/gif.tsx b/packages/components/src/components/gif.tsx index 6876f28f..0cd6916b 100644 --- a/packages/components/src/components/gif.tsx +++ b/packages/components/src/components/gif.tsx @@ -224,7 +224,7 @@ const Gif = ({ // if this component goes from showing an ad to not an ad useEffect(() => { if (!shouldShowMedia) { - stopTracking() + return () => stopTracking() } }, [shouldShowMedia]) From c0d520931c24a6b70b77e34ef5eb2bcb1e62acd8 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:47:22 -0700 Subject: [PATCH 09/28] Restored response_id to IGif type --- packages/types/src/gif.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/types/src/gif.ts b/packages/types/src/gif.ts index f9e7683b..58ad66ec 100644 --- a/packages/types/src/gif.ts +++ b/packages/types/src/gif.ts @@ -35,6 +35,7 @@ export default interface IGif { is_removed: boolean tags: string[] bottle_data: IBottleData + response_id: string analytics_response_payload: string video?: IVideo emoji_group_id?: number From 7c22174889872551550b46033bc9a0312ee68cce Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:55:10 -0700 Subject: [PATCH 10/28] restored response id and pingback type to normalize/gif.ts --- packages/fetch-api/src/normalize/gif.ts | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/fetch-api/src/normalize/gif.ts b/packages/fetch-api/src/normalize/gif.ts index 69a53e73..2c4ba5d1 100644 --- a/packages/fetch-api/src/normalize/gif.ts +++ b/packages/fetch-api/src/normalize/gif.ts @@ -1,4 +1,4 @@ -import { IGif } from '@giphy/js-types' +import { IGif, PingbackEventType } from '@giphy/js-types' import { GifResult, GifsResult } from '../result-types' /** @@ -29,10 +29,20 @@ 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 = '', pingbackType: PingbackEventType = '') => { const newGif: IGif = { ...gif } newGif.id = String(newGif.id) newGif.tags = (newGif.tags || []).map(getTag) + if (!newGif.bottle_data) { + newGif.bottle_data = {} as any + } + if (responseId) { + newGif.response_id = responseId + // @ts-ignore + newGif.pingbackType = pingbackType + } + newGif.response_id = responseId + newGif.pingback_event_type = pingbackType BOOL_PROPS.forEach(makeBool(newGif)) Object.keys(newGif.images || {}).forEach((name: string) => { const img = newGif.images[name] @@ -52,15 +62,17 @@ const normalize = (gif: any) => { /** * @hidden */ -export const normalizeGif = (result: GifResult) => { - result.data = normalize(result.data) +export const normalizeGif = (result: GifResult, pingbackType?: PingbackEventType) => { + const { response_id } = result.meta + result.data = normalize(result.data, response_id, pingbackType) return result } /** * @hidden */ -export const normalizeGifs = (result: GifsResult) => { - result.data = result.data.map((gif) => normalize(gif)) +export const normalizeGifs = (result: GifsResult, pingbackType?: PingbackEventType) => { + const { response_id } = result.meta + result.data = result.data.map((gif) => normalize(gif, response_id, pingbackType)) return result } From 42a1e2a33de71a09131ec4323a0ddeed4c64f3c2 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 13:56:56 -0700 Subject: [PATCH 11/28] Removed pingbackeventtype from normalize.ts --- packages/fetch-api/src/normalize/gif.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/fetch-api/src/normalize/gif.ts b/packages/fetch-api/src/normalize/gif.ts index 2c4ba5d1..920d25ba 100644 --- a/packages/fetch-api/src/normalize/gif.ts +++ b/packages/fetch-api/src/normalize/gif.ts @@ -1,4 +1,4 @@ -import { IGif, PingbackEventType } from '@giphy/js-types' +import { IGif } from '@giphy/js-types' import { GifResult, GifsResult } from '../result-types' /** @@ -29,7 +29,7 @@ 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, responseId: string = '', pingbackType: PingbackEventType = '') => { +const normalize = (gif: any, responseId: string = '') => { const newGif: IGif = { ...gif } newGif.id = String(newGif.id) newGif.tags = (newGif.tags || []).map(getTag) @@ -38,11 +38,8 @@ const normalize = (gif: any, responseId: string = '', pingbackType: PingbackEven } if (responseId) { newGif.response_id = responseId - // @ts-ignore - newGif.pingbackType = pingbackType } newGif.response_id = responseId - newGif.pingback_event_type = pingbackType BOOL_PROPS.forEach(makeBool(newGif)) Object.keys(newGif.images || {}).forEach((name: string) => { const img = newGif.images[name] @@ -62,17 +59,17 @@ const normalize = (gif: any, responseId: string = '', pingbackType: PingbackEven /** * @hidden */ -export const normalizeGif = (result: GifResult, pingbackType?: PingbackEventType) => { +export const normalizeGif = (result: GifResult) => { const { response_id } = result.meta - result.data = normalize(result.data, response_id, pingbackType) + result.data = normalize(result.data, response_id) return result } /** * @hidden */ -export const normalizeGifs = (result: GifsResult, pingbackType?: PingbackEventType) => { +export const normalizeGifs = (result: GifsResult) => { const { response_id } = result.meta - result.data = result.data.map((gif) => normalize(gif, response_id, pingbackType)) + result.data = result.data.map((gif) => normalize(gif, response_id)) return result } From b82aad778d6b8d4ec7318af96068d607810a3a45 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 9 Apr 2024 14:08:48 -0700 Subject: [PATCH 12/28] experimenting with different purify versions --- packages/util/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/util/package.json b/packages/util/package.json index 35c054a7..5b34e5eb 100644 --- a/packages/util/package.json +++ b/packages/util/package.json @@ -35,7 +35,7 @@ }, "dependencies": { "@giphy/js-types": "*", - "dompurify": "^2.2.2", + "dompurify": "2.2.2", "uuid": "^9.0.0" }, "devDependencies": { @@ -43,4 +43,4 @@ "@types/uuid": "^8.3.0", "typescript": "^5.0.4" } -} +} \ No newline at end of file From d8be1d62aa5cfde3611b1c9aa823d6106d0b7f4a Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Fri, 12 Apr 2024 17:36:09 -0400 Subject: [PATCH 13/28] deps: issues with dompurify imports --- packages/util/package.json | 4 ++-- packages/util/src/tracking-pixel.ts | 4 ++-- yarn.lock | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/util/package.json b/packages/util/package.json index 5b34e5eb..a270fdcf 100644 --- a/packages/util/package.json +++ b/packages/util/package.json @@ -35,7 +35,7 @@ }, "dependencies": { "@giphy/js-types": "*", - "dompurify": "2.2.2", + "dompurify": "3.1.0", "uuid": "^9.0.0" }, "devDependencies": { @@ -43,4 +43,4 @@ "@types/uuid": "^8.3.0", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/packages/util/src/tracking-pixel.ts b/packages/util/src/tracking-pixel.ts index b241fe12..d556097f 100644 --- a/packages/util/src/tracking-pixel.ts +++ b/packages/util/src/tracking-pixel.ts @@ -1,10 +1,10 @@ -import { sanitize } from 'dompurify' +import DOMPurify from 'dompurify' const injectTrackingPixel = (tags: string[] = []) => { tags.forEach((tag) => { const el = document.createElement('html') tag = tag.replace('%%CACHEBUSTER%%', Date.now().toString()) - el.innerHTML = sanitize(tag) + el.innerHTML = DOMPurify.sanitize(tag) const pixel = el.querySelector('img') if (pixel) { document?.querySelector('head')?.appendChild(pixel) diff --git a/yarn.lock b/yarn.lock index ff96f0ad..b79a1619 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2553,7 +2553,7 @@ __metadata: "@giphy/js-types": "*" "@types/dompurify": ^2.0.4 "@types/uuid": ^8.3.0 - dompurify: ^2.2.2 + dompurify: 3.1.0 typescript: ^5.0.4 uuid: ^9.0.0 languageName: unknown @@ -9659,10 +9659,10 @@ __metadata: languageName: node linkType: hard -"dompurify@npm:^2.2.2": - version: 2.4.7 - resolution: "dompurify@npm:2.4.7" - checksum: 13c047e772a1998348191554dda403950d45ef2ec75fa0b9915cc179ccea0a39ef780d283109bd72cf83a2a085af6c77664281d4d0106a737bc5f39906364efe +"dompurify@npm:3.1.0": + version: 3.1.0 + resolution: "dompurify@npm:3.1.0" + checksum: 06fc76607cd076e394b2ea5479ab6f0407b8fedb6877ae95e94207b878365e5e1cd914055dacce152a5f419818afb8d4cd284b780246cf35363f0747c179a0ba languageName: node linkType: hard From 700bf4bb5fc231bd6e92f1bcaf0eb730fe4f34f9 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 22 Apr 2024 14:43:14 -0400 Subject: [PATCH 14/28] Removed superfluous condition --- packages/fetch-api/src/normalize/gif.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/fetch-api/src/normalize/gif.ts b/packages/fetch-api/src/normalize/gif.ts index 920d25ba..12a6cbb7 100644 --- a/packages/fetch-api/src/normalize/gif.ts +++ b/packages/fetch-api/src/normalize/gif.ts @@ -36,9 +36,6 @@ const normalize = (gif: any, responseId: string = '') => { if (!newGif.bottle_data) { newGif.bottle_data = {} as any } - if (responseId) { - newGif.response_id = responseId - } newGif.response_id = responseId BOOL_PROPS.forEach(makeBool(newGif)) Object.keys(newGif.images || {}).forEach((name: string) => { From 65ef2e42736491afad93c80f5be025087ac674c4 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 22 Apr 2024 17:08:53 -0400 Subject: [PATCH 15/28] added moat to react components gif component --- .../react-components/src/components/gif.tsx | 60 ++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx index 3dcc42ea..3ef9a531 100644 --- a/packages/react-components/src/components/gif.tsx +++ b/packages/react-components/src/components/gif.tsx @@ -1,8 +1,16 @@ 'use client' 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 { + Logger, + getAltText, + getBestRendition, + getGifHeight, + constructMoatData, + injectTrackingPixel, +} from '@giphy/js-util' import 'intersection-observer' +import moat from '@giphy/moat-loader' import React, { ElementType, ReactNode, SyntheticEvent, useContext, useEffect, useRef, useState } from 'react' import styled from 'styled-components' import * as pingback from '../util/pingback' @@ -11,6 +19,8 @@ import VerifiedBadge from './attribution/verified-badge' import { PingbackContext } from './pingback-context-manager' import { GifOverlayProps } from './types' +const moatLoader = moat.loadMoatTag('giphydisplay879451385633', 'https://giphyscripts.s3.amazonaws.com/moat/moatad.js') + const Container = styled.div` position: relative; display: block; @@ -50,6 +60,11 @@ export type EventProps = { onGifKeyPress?: (gif: IGif, e: SyntheticEvent) => void } +function useMutableRef(initialValue?: T) { + const [ref] = useState<{ current: T | undefined }>({ current: initialValue }) + return ref +} + type GifProps = { gif: IGif width: number @@ -86,6 +101,7 @@ const RenderOnClient = ({ children }: { children: ReactNode }) => { const Gif = ({ gif, + gif: { bottle_data: bottleData = {} }, width, percentWidth, height: forcedHeight, @@ -128,6 +144,10 @@ const Gif = ({ const hoverTimeout = useRef() // fire onseen ref (changes per gif, so need a ref) const sendOnSeen = useRef<(_: IntersectionObserverEntry) => void>(noop) + // moat ad number + const moatAdNumber = useMutableRef() + // are we displaying an ad + const isAd = Object.keys(bottleData).length > 0 // custom pingback const { attributes } = useContext(PingbackContext) // user's overlay @@ -192,8 +212,28 @@ const Gif = ({ } } + const trackWithMoat = async () => { + if (shouldShowMedia && container.current) { + const { bottle_data: bottleData, response_id } = gif + const moatCompatibleData = constructMoatData(bottleData as any) + if (moatCompatibleData) { + moatCompatibleData.zMoatSession = response_id + await moatLoader + if (container.current) { + moatAdNumber.current = moat.startTracking(container.current, moatCompatibleData) + } + } + } + } + const onImageLoad = (e: SyntheticEvent) => { watchGif() + if (isAd) { + if (moatAdNumber.current === undefined) { + trackWithMoat() + } + injectTrackingPixel(bottleData.tags) + } onGifVisible(gif, e) // gif is visible, perhaps just partially setLoadedClassName(Gif.imgLoadedClassName) } @@ -210,6 +250,23 @@ const Gif = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [gif.id]) + const stopTracking = () => { + // if we have a moat ad number + if (moatAdNumber.current !== undefined) { + // stop tracking + moat.stopTracking(moatAdNumber.current) + // remove the moat ad number + moatAdNumber.current = undefined + } + } + + // if this component goes from showing an ad to not an ad + useEffect(() => { + if (!shouldShowMedia) { + return () => stopTracking() + } + }, [shouldShowMedia]) + useEffect(() => { showGifObserver.current = new IntersectionObserver(([entry]: IntersectionObserverEntry[]) => { const { isIntersecting } = entry @@ -226,6 +283,7 @@ const Gif = ({ if (showGifObserver.current) showGifObserver.current.disconnect() if (fullGifObserver.current) fullGifObserver.current.disconnect() if (hoverTimeout.current) clearTimeout(hoverTimeout.current) + stopTracking() } }, []) const height = forcedHeight || getGifHeight(gif, width) From 41f363dccc3d7d5c6383c9f68156c848b22277ba Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Mon, 22 Apr 2024 17:24:03 -0400 Subject: [PATCH 16/28] updated changeset --- .changeset/light-tools-change.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/light-tools-change.md diff --git a/.changeset/light-tools-change.md b/.changeset/light-tools-change.md new file mode 100644 index 00000000..937b6e72 --- /dev/null +++ b/.changeset/light-tools-change.md @@ -0,0 +1,5 @@ +--- +'@giphy/react-components': patch +--- + +Adding moat integration to react-components From 555c76c22d7386fd5fa26f2579df66fc38e3933b Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Mon, 22 Apr 2024 16:36:49 -0400 Subject: [PATCH 17/28] deps: update changeset cli --- package.json | 2 +- yarn.lock | 371 +++++++++++++++++++++++++-------------------------- 2 files changed, 185 insertions(+), 188 deletions(-) diff --git a/package.json b/package.json index 1ca4721d..a3d5cef5 100644 --- 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/yarn.lock b/yarn.lock index b79a1619..8a1bb6d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1651,212 +1651,211 @@ __metadata: languageName: node linkType: hard -"@changesets/apply-release-plan@npm:^6.1.4": - version: 6.1.4 - resolution: "@changesets/apply-release-plan@npm:6.1.4" - dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/config": "npm:^2.3.1" - "@changesets/get-version-range-type": "npm:^0.3.2" - "@changesets/git": "npm:^2.0.0" - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - detect-indent: "npm:^6.0.0" - fs-extra: "npm:^7.0.1" - lodash.startcase: "npm:^4.4.0" - outdent: "npm:^0.5.0" - prettier: "npm:^2.7.1" - resolve-from: "npm:^5.0.0" - semver: "npm:^7.5.3" - checksum: d386aee70c5483c97d964c6fa1191878005b7050d34b2e1e4a1ad66d9ad44f8f20d1c884e01e770b954bd2d4364f935510e53ae896212669f67e5c37b2a610c7 - languageName: node - linkType: hard - -"@changesets/assemble-release-plan@npm:^5.2.4": - version: 5.2.4 - resolution: "@changesets/assemble-release-plan@npm:5.2.4" - dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/errors": "npm:^0.1.4" - "@changesets/get-dependents-graph": "npm:^1.3.6" - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - semver: "npm:^7.5.3" - checksum: 32f443a0afec3d5a4afc68c8de32e8ff88531ea24976b50583b1d6870d71cec2729f27952af82854eb54e2ad0a619872d211d654c596ee0eb42c83ab54ad15ae - languageName: node - linkType: hard - -"@changesets/changelog-git@npm:^0.1.14": - version: 0.1.14 - resolution: "@changesets/changelog-git@npm:0.1.14" +"@changesets/apply-release-plan@npm:^7.0.0": + version: 7.0.0 + resolution: "@changesets/apply-release-plan@npm:7.0.0" + dependencies: + "@babel/runtime": ^7.20.1 + "@changesets/config": ^3.0.0 + "@changesets/get-version-range-type": ^0.4.0 + "@changesets/git": ^3.0.0 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + detect-indent: ^6.0.0 + fs-extra: ^7.0.1 + lodash.startcase: ^4.4.0 + outdent: ^0.5.0 + prettier: ^2.7.1 + resolve-from: ^5.0.0 + semver: ^7.5.3 + checksum: ad83f89a3d46cd5249fa960cb0324114532bd5f25e74466d181afd6661273824859d038a12ba587a5e044f9169810e4a6febbb61e23c3819b3b28c00176a8bdf + languageName: node + linkType: hard + +"@changesets/assemble-release-plan@npm:^6.0.0": + version: 6.0.0 + resolution: "@changesets/assemble-release-plan@npm:6.0.0" dependencies: - "@changesets/types": "npm:^5.2.1" - checksum: 60b45bb899e66cec669ab3884d5d18550cd30bf5a8b06f335eb72aa6c9e018dd3e0187e4df61c91a22076153e346b735b792f0e9c6186e6245b1b7aec2fc42d4 + "@babel/runtime": ^7.20.1 + "@changesets/errors": ^0.2.0 + "@changesets/get-dependents-graph": ^2.0.0 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + semver: ^7.5.3 + checksum: 0e6d25f25e0e3cc0e92aa8c43f5f496bae9464e2523be4ff81e31b6c9971b63bb1264821a2483c48d451d89d60af1acebe727e7f8c392ed48188a3ff26d0950e languageName: node linkType: hard -"@changesets/cli@npm:^2.26.1": - version: 2.26.2 - resolution: "@changesets/cli@npm:2.26.2" - dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/apply-release-plan": "npm:^6.1.4" - "@changesets/assemble-release-plan": "npm:^5.2.4" - "@changesets/changelog-git": "npm:^0.1.14" - "@changesets/config": "npm:^2.3.1" - "@changesets/errors": "npm:^0.1.4" - "@changesets/get-dependents-graph": "npm:^1.3.6" - "@changesets/get-release-plan": "npm:^3.0.17" - "@changesets/git": "npm:^2.0.0" - "@changesets/logger": "npm:^0.0.5" - "@changesets/pre": "npm:^1.0.14" - "@changesets/read": "npm:^0.5.9" - "@changesets/types": "npm:^5.2.1" - "@changesets/write": "npm:^0.2.3" - "@manypkg/get-packages": "npm:^1.1.3" - "@types/is-ci": "npm:^3.0.0" - "@types/semver": "npm:^7.5.0" - ansi-colors: "npm:^4.1.3" - chalk: "npm:^2.1.0" - enquirer: "npm:^2.3.0" - external-editor: "npm:^3.1.0" - fs-extra: "npm:^7.0.1" - human-id: "npm:^1.0.2" - is-ci: "npm:^3.0.1" - meow: "npm:^6.0.0" - outdent: "npm:^0.5.0" - p-limit: "npm:^2.2.0" - preferred-pm: "npm:^3.0.0" - resolve-from: "npm:^5.0.0" - semver: "npm:^7.5.3" - spawndamnit: "npm:^2.0.0" - term-size: "npm:^2.1.0" - tty-table: "npm:^4.1.5" +"@changesets/changelog-git@npm:^0.2.0": + version: 0.2.0 + resolution: "@changesets/changelog-git@npm:0.2.0" + dependencies: + "@changesets/types": ^6.0.0 + checksum: 132660f7fdabbdda00ac803cc822d6427a1a38a17a5f414e87ad32f6dc4cbef5280a147ecdc087a28dc06c8bd0762f8d6e7132d01b8a4142b59fbe1bc2177034 + languageName: node + linkType: hard + +"@changesets/cli@npm:^2.27.1": + version: 2.27.1 + resolution: "@changesets/cli@npm:2.27.1" + dependencies: + "@babel/runtime": ^7.20.1 + "@changesets/apply-release-plan": ^7.0.0 + "@changesets/assemble-release-plan": ^6.0.0 + "@changesets/changelog-git": ^0.2.0 + "@changesets/config": ^3.0.0 + "@changesets/errors": ^0.2.0 + "@changesets/get-dependents-graph": ^2.0.0 + "@changesets/get-release-plan": ^4.0.0 + "@changesets/git": ^3.0.0 + "@changesets/logger": ^0.1.0 + "@changesets/pre": ^2.0.0 + "@changesets/read": ^0.6.0 + "@changesets/types": ^6.0.0 + "@changesets/write": ^0.3.0 + "@manypkg/get-packages": ^1.1.3 + "@types/semver": ^7.5.0 + ansi-colors: ^4.1.3 + chalk: ^2.1.0 + ci-info: ^3.7.0 + enquirer: ^2.3.0 + external-editor: ^3.1.0 + fs-extra: ^7.0.1 + human-id: ^1.0.2 + meow: ^6.0.0 + outdent: ^0.5.0 + p-limit: ^2.2.0 + preferred-pm: ^3.0.0 + resolve-from: ^5.0.0 + semver: ^7.5.3 + spawndamnit: ^2.0.0 + term-size: ^2.1.0 + tty-table: ^4.1.5 bin: changeset: bin.js - checksum: fc7b5bf319b19abed7a8d33a9fbd9ce49108af61c9c51920f609a49cb0c557f0b998711250d0cac149d0bed8a522f3109c4d8b0dda65b96ff2f823d16ca2f972 + checksum: 0d030dec7e0ef28626082a257d57f46cdf65edb65a95f5a3511a9d298ca052388d8ab7f9a714943864eddc59148c4afb0b802a9c75b5bea45aade4c0dc7a5fa6 languageName: node linkType: hard -"@changesets/config@npm:^2.3.1": - version: 2.3.1 - resolution: "@changesets/config@npm:2.3.1" - dependencies: - "@changesets/errors": "npm:^0.1.4" - "@changesets/get-dependents-graph": "npm:^1.3.6" - "@changesets/logger": "npm:^0.0.5" - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - fs-extra: "npm:^7.0.1" - micromatch: "npm:^4.0.2" - checksum: 8af58e3add4751ac8ce2c01f026ac8843b8d1c07c9a3df6518496eaef67f56458a84cad310763c588f7eccbf6831afbf280df7e05e78b294027b6b847be3d0cc +"@changesets/config@npm:^3.0.0": + version: 3.0.0 + resolution: "@changesets/config@npm:3.0.0" + dependencies: + "@changesets/errors": ^0.2.0 + "@changesets/get-dependents-graph": ^2.0.0 + "@changesets/logger": ^0.1.0 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + fs-extra: ^7.0.1 + micromatch: ^4.0.2 + checksum: 31a8c37e38768cf3676d24b7d371009dd1d691f221ecf086b79f0d96dc8e95aa408cda3659eb867a14615ea38a1c2be448bf0655c7570539af57c930ca784051 languageName: node linkType: hard -"@changesets/errors@npm:^0.1.4": - version: 0.1.4 - resolution: "@changesets/errors@npm:0.1.4" +"@changesets/errors@npm:^0.2.0": + version: 0.2.0 + resolution: "@changesets/errors@npm:0.2.0" dependencies: - extendable-error: "npm:^0.1.5" - checksum: 10734f1379715bf5a70b566dd42b50a75964d76f382bb67332776614454deda6d04a43dd7e727cd7cba56d7f2f7c95a07c7c0a19dd5d64fb1980b28322840733 + extendable-error: ^0.1.5 + checksum: 4b79373f92287af4f723e8dbbccaf0299aa8735fc043243d0ad587f04a7614615ea50180be575d4438b9f00aa82d1cf85e902b77a55bdd3e0a8dd97e77b18c60 languageName: node linkType: hard -"@changesets/get-dependents-graph@npm:^1.3.6": - version: 1.3.6 - resolution: "@changesets/get-dependents-graph@npm:1.3.6" +"@changesets/get-dependents-graph@npm:^2.0.0": + version: 2.0.0 + resolution: "@changesets/get-dependents-graph@npm:2.0.0" dependencies: - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - chalk: "npm:^2.1.0" - fs-extra: "npm:^7.0.1" - semver: "npm:^7.5.3" - checksum: d2cbbc5041063b939899502d1b264a0d9edb655acefd7f6197883229156bb7cfd1ace642ae4a1f7f7b432f2c51429f5dc9851ff5a9ed47f1c0159916e66627a9 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + chalk: ^2.1.0 + fs-extra: ^7.0.1 + semver: ^7.5.3 + checksum: 6690d3ed36e8a636bc2a985d209bd72ee1100601ccf00850ca1fbe8500af839a3f4e5bd2167858cf11383aa76360f853e481533157060ad882fb56319db3090a languageName: node linkType: hard -"@changesets/get-release-plan@npm:^3.0.17": - version: 3.0.17 - resolution: "@changesets/get-release-plan@npm:3.0.17" +"@changesets/get-release-plan@npm:^4.0.0": + version: 4.0.0 + resolution: "@changesets/get-release-plan@npm:4.0.0" dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/assemble-release-plan": "npm:^5.2.4" - "@changesets/config": "npm:^2.3.1" - "@changesets/pre": "npm:^1.0.14" - "@changesets/read": "npm:^0.5.9" - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - checksum: 8a0e3794d0f1e6220d173dbec96352ad69b585d013c3183888ca598dfdfcaa8a5ac3f7f36d5c511575cdc3559c2ad6f8cecfaa16ba9c24380899a81daa7af924 + "@babel/runtime": ^7.20.1 + "@changesets/assemble-release-plan": ^6.0.0 + "@changesets/config": ^3.0.0 + "@changesets/pre": ^2.0.0 + "@changesets/read": ^0.6.0 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + checksum: 57672c1e94f95de8ac65aac969275e0cb225f02aa86b2cef69329fff6e36ba5fde04eadeb6af36f4d8ac41a8fd329028b4df4c23c15c10fd13e026c77463d576 languageName: node linkType: hard -"@changesets/get-version-range-type@npm:^0.3.2": - version: 0.3.2 - resolution: "@changesets/get-version-range-type@npm:0.3.2" - checksum: b7ee7127c472a3886906ca6db336ac11233a5e75abc882084bfb4794e79a8936e3faceec3c04bf61c26453cd7f74278d9bf22aea4cdca8c1cd992591925b3c9b +"@changesets/get-version-range-type@npm:^0.4.0": + version: 0.4.0 + resolution: "@changesets/get-version-range-type@npm:0.4.0" + checksum: 2e8c511e658e193f48de7f09522649c4cf072932f0cbe0f252a7f2703d7775b0b90b632254526338795d0658e340be9dff3879cfc8eba4534b8cd6071efff8c9 languageName: node linkType: hard -"@changesets/git@npm:^2.0.0": - version: 2.0.0 - resolution: "@changesets/git@npm:2.0.0" +"@changesets/git@npm:^3.0.0": + version: 3.0.0 + resolution: "@changesets/git@npm:3.0.0" dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/errors": "npm:^0.1.4" - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - is-subdir: "npm:^1.1.1" - micromatch: "npm:^4.0.2" - spawndamnit: "npm:^2.0.0" - checksum: 3820b7b689bbe8dfb93222c766bee214e68a45f07b2b5c8056891f9ffe6f1e369c0f84388246a9eea5317b496ae80ffd1508319190f79c359f060ebf8ccb7b13 + "@babel/runtime": ^7.20.1 + "@changesets/errors": ^0.2.0 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + is-subdir: ^1.1.1 + micromatch: ^4.0.2 + spawndamnit: ^2.0.0 + checksum: a8fa66d77302b50d5e604aca898ee813247537d23a05004637ecee4aa1579d6a2859283c099bdcf3e2b232258c93ff81dd57aa867858788e457df40118c64c2b languageName: node linkType: hard -"@changesets/logger@npm:^0.0.5": - version: 0.0.5 - resolution: "@changesets/logger@npm:0.0.5" +"@changesets/logger@npm:^0.1.0": + version: 0.1.0 + resolution: "@changesets/logger@npm:0.1.0" dependencies: - chalk: "npm:^2.1.0" - checksum: bfec3cd9122b00c0ec25e96730f771ffd662ef3906d571bad1e4e9993f9d54d357d3eaf074b3dfaa4e23af759ce68efa2a97d8b845b0d8c951df5d21c6dfdff5 + chalk: ^2.1.0 + checksum: d8ef1b7caf3d2c15a9e7743b7a9462e0c2e61c76d9a5bbed5eff805afa8226117505309c6e9095001136b4f6d9ae0aba61377e53af8aa0809f1febd1b5f787f1 languageName: node linkType: hard -"@changesets/parse@npm:^0.3.16": - version: 0.3.16 - resolution: "@changesets/parse@npm:0.3.16" +"@changesets/parse@npm:^0.4.0": + version: 0.4.0 + resolution: "@changesets/parse@npm:0.4.0" dependencies: - "@changesets/types": "npm:^5.2.1" - js-yaml: "npm:^3.13.1" - checksum: 475f808ac8d33ec90af3914d55af1da8eeb9336d6cab7dd9e5be74af844f0ec04f4a67d5237a1d3284a468e0c9198e2be01d0e5870a1b28e63bc240f5f1ffea9 + "@changesets/types": ^6.0.0 + js-yaml: ^3.13.1 + checksum: 3dd970b244479746233ebd357cfff3816cf9f344ebf2cf0c7c55ce8579adfd3f506978e86ad61222dc3acf1548a2105ffdd8b3e940b3f82b225741315cee2bf0 languageName: node linkType: hard -"@changesets/pre@npm:^1.0.14": - version: 1.0.14 - resolution: "@changesets/pre@npm:1.0.14" +"@changesets/pre@npm:^2.0.0": + version: 2.0.0 + resolution: "@changesets/pre@npm:2.0.0" dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/errors": "npm:^0.1.4" - "@changesets/types": "npm:^5.2.1" - "@manypkg/get-packages": "npm:^1.1.3" - fs-extra: "npm:^7.0.1" - checksum: 6b849bd6f916476a5b5664bc4286020bee506985c82f723a757fa4e681b0b7129db81751f16072ac55a980ffd83a4b234d6b8d0f8b6bc889aa0c0fd5377431e8 + "@babel/runtime": ^7.20.1 + "@changesets/errors": ^0.2.0 + "@changesets/types": ^6.0.0 + "@manypkg/get-packages": ^1.1.3 + fs-extra: ^7.0.1 + checksum: 6a01086405f4e4ce63abb8f222de39b69a5762c9c8c8f19c0d3c72f7798248d7a152937028f1be24be1f8a4a5e47e4cb23c54bc36f979539b24a728c893caf4e languageName: node linkType: hard -"@changesets/read@npm:^0.5.9": - version: 0.5.9 - resolution: "@changesets/read@npm:0.5.9" +"@changesets/read@npm:^0.6.0": + version: 0.6.0 + resolution: "@changesets/read@npm:0.6.0" dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/git": "npm:^2.0.0" - "@changesets/logger": "npm:^0.0.5" - "@changesets/parse": "npm:^0.3.16" - "@changesets/types": "npm:^5.2.1" - chalk: "npm:^2.1.0" - fs-extra: "npm:^7.0.1" - p-filter: "npm:^2.1.0" - checksum: 0875a80829186de2da55bc0347601cc31b269d54fb6967a5093abacbbd9f949e352907b8340b61348a304228fdade670ded151327f16eea3424b5b4b2bb9888c + "@babel/runtime": ^7.20.1 + "@changesets/git": ^3.0.0 + "@changesets/logger": ^0.1.0 + "@changesets/parse": ^0.4.0 + "@changesets/types": ^6.0.0 + chalk: ^2.1.0 + fs-extra: ^7.0.1 + p-filter: ^2.1.0 + checksum: 3da6428124b4983f6ccbdae324c73044cd6a84269bfdbaff545331042e3d6845c647613b5d8f4ffdd48bad5b791623eca2be1b507652ea47b77e136cd2e26c70 languageName: node linkType: hard @@ -1867,23 +1866,23 @@ __metadata: languageName: node linkType: hard -"@changesets/types@npm:^5.2.1": - version: 5.2.1 - resolution: "@changesets/types@npm:5.2.1" - checksum: 527dc1aa41b040fe35bcd55f7d07bec710320b179b000c429723e25b87aac18be487daf5047d4fecf2781aad78f73abff111e76e411b652f7a2e812a464c69f2 +"@changesets/types@npm:^6.0.0": + version: 6.0.0 + resolution: "@changesets/types@npm:6.0.0" + checksum: d528b5d712f62c26ea422c7d34ccf6eac57a353c0733d96716db3c796ecd9bba5d496d48b37d5d46b784dc45b69c06ce3345fa3515df981bb68456cad68e6465 languageName: node linkType: hard -"@changesets/write@npm:^0.2.3": - version: 0.2.3 - resolution: "@changesets/write@npm:0.2.3" +"@changesets/write@npm:^0.3.0": + version: 0.3.0 + resolution: "@changesets/write@npm:0.3.0" dependencies: - "@babel/runtime": "npm:^7.20.1" - "@changesets/types": "npm:^5.2.1" - fs-extra: "npm:^7.0.1" - human-id: "npm:^1.0.2" - prettier: "npm:^2.7.1" - checksum: 40ad8069f9adc565b78a5f25992e31b41a12e551d94c29e1b4def49ce98871a1e358feda6536be8b363a6dba18b1226a22ecfc60fdd7bc1e74bfcf46b07f91be + "@babel/runtime": ^7.20.1 + "@changesets/types": ^6.0.0 + fs-extra: ^7.0.1 + human-id: ^1.0.2 + prettier: ^2.7.1 + checksum: 37588eb3ef2af15b3ea09d46864c994780619d20b791ea5b654801a035a3a12540c7f953e6e4f36731678615edc6d1c32f8fe174d599d3e6ce2d68263865788b languageName: node linkType: hard @@ -5294,15 +5293,6 @@ __metadata: languageName: node linkType: hard -"@types/is-ci@npm:^3.0.0": - version: 3.0.0 - resolution: "@types/is-ci@npm:3.0.0" - dependencies: - ci-info: "npm:^3.1.0" - checksum: 7c1f1f16c1fa2134de7400d82766c83fa76057261ba890628af77a09382ebb92d945bb077b98cfcf3d40ab1469c9ffbd2278112867edbe57aa655f53547eb139 - languageName: node - linkType: hard - "@types/is-function@npm:^1.0.0": version: 1.0.1 resolution: "@types/is-function@npm:1.0.1" @@ -7936,13 +7926,20 @@ __metadata: languageName: node linkType: hard -"ci-info@npm:^3.1.0, ci-info@npm:^3.2.0": +"ci-info@npm:^3.2.0": version: 3.8.0 resolution: "ci-info@npm:3.8.0" checksum: d0a4d3160497cae54294974a7246202244fff031b0a6ea20dd57b10ec510aa17399c41a1b0982142c105f3255aff2173e5c0dd7302ee1b2f28ba3debda375098 languageName: node linkType: hard +"ci-info@npm:^3.7.0": + version: 3.9.0 + resolution: "ci-info@npm:3.9.0" + checksum: 6b19dc9b2966d1f8c2041a838217299718f15d6c4b63ae36e4674edd2bee48f780e94761286a56aa59eb305a85fbea4ddffb7630ec063e7ec7e7e5ad42549a87 + languageName: node + linkType: hard + "cipher-base@npm:^1.0.0, cipher-base@npm:^1.0.1, cipher-base@npm:^1.0.3": version: 1.0.4 resolution: "cipher-base@npm:1.0.4" @@ -11913,7 +11910,7 @@ __metadata: version: 0.0.0-use.local resolution: "giphy-js@workspace:." dependencies: - "@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 @@ -13136,7 +13133,7 @@ __metadata: languageName: node linkType: hard -"is-ci@npm:^3.0.0, is-ci@npm:^3.0.1": +"is-ci@npm:^3.0.0": version: 3.0.1 resolution: "is-ci@npm:3.0.1" dependencies: From 5fb67e499ad035a1d4520cafbd431114b4983f10 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Tue, 23 Apr 2024 16:52:23 -0400 Subject: [PATCH 18/28] changeset --- .changeset/light-tools-change.md | 5 ----- .changeset/swift-owls-sin.md | 5 ----- .changeset/warm-baboons-fold.md | 9 +++++++++ 3 files changed, 9 insertions(+), 10 deletions(-) delete mode 100644 .changeset/light-tools-change.md delete mode 100644 .changeset/swift-owls-sin.md create mode 100644 .changeset/warm-baboons-fold.md diff --git a/.changeset/light-tools-change.md b/.changeset/light-tools-change.md deleted file mode 100644 index 937b6e72..00000000 --- a/.changeset/light-tools-change.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@giphy/react-components': patch ---- - -Adding moat integration to react-components diff --git a/.changeset/swift-owls-sin.md b/.changeset/swift-owls-sin.md deleted file mode 100644 index 796ec45e..00000000 --- a/.changeset/swift-owls-sin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@giphy/js-components': minor ---- - -Readded MOAT tracking to react-sdk diff --git a/.changeset/warm-baboons-fold.md b/.changeset/warm-baboons-fold.md new file mode 100644 index 00000000..1361ad34 --- /dev/null +++ b/.changeset/warm-baboons-fold.md @@ -0,0 +1,9 @@ +--- +'@giphy/react-components': minor +'@giphy/js-components': minor +'@giphy/js-fetch-api': minor +'@giphy/js-types': minor +'@giphy/js-util': minor +--- + +Readded MOAT tracking to react-sdk From 702480decd54b6701918fff0d10ddfb5229d47f4 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Wed, 24 Apr 2024 15:40:31 -0400 Subject: [PATCH 19/28] types: add tdata to IBottleData --- packages/types/src/gif.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/types/src/gif.ts b/packages/types/src/gif.ts index 58ad66ec..930338c0 100644 --- a/packages/types/src/gif.ts +++ b/packages/types/src/gif.ts @@ -5,6 +5,9 @@ import IVideo from './video' interface IBottleData { tid?: string tags?: string[] + tdata?: { + click_out_url?: string + } } export type GifID = string | number From e436a4ea43861051c1f0bb1ad2eb49c058ab6761 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Wed, 24 Apr 2024 15:45:31 -0400 Subject: [PATCH 20/28] types: remove IBottleData and let host application define it --- packages/components/src/components/gif.tsx | 4 ++-- packages/types/src/gif.ts | 10 +--------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/components/src/components/gif.tsx b/packages/components/src/components/gif.tsx index 0cd6916b..f55382d3 100644 --- a/packages/components/src/components/gif.tsx +++ b/packages/components/src/components/gif.tsx @@ -168,8 +168,8 @@ const Gif = ({ } const trackWithMoat = async () => { if (shouldShowMedia && container.current) { - const { bottle_data: bottleData, response_id } = gif - const moatCompatibleData = constructMoatData(bottleData as any) + const { bottle_data, response_id } = gif + const moatCompatibleData = constructMoatData(bottle_data as any) if (moatCompatibleData) { moatCompatibleData.zMoatSession = response_id await moatLoader diff --git a/packages/types/src/gif.ts b/packages/types/src/gif.ts index 930338c0..74cfda35 100644 --- a/packages/types/src/gif.ts +++ b/packages/types/src/gif.ts @@ -2,14 +2,6 @@ import { IImages } from './images' import IUser from './user' import IVideo from './video' -interface IBottleData { - tid?: string - tags?: string[] - tdata?: { - click_out_url?: string - } -} - export type GifID = string | number export default interface IGif { @@ -37,7 +29,7 @@ export default interface IGif { is_scheduled: boolean is_removed: boolean tags: string[] - bottle_data: IBottleData + bottle_data: any response_id: string analytics_response_payload: string video?: IVideo From eebcad09feecd2dc6cc9004c723fdccc3487fe85 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Tue, 30 Apr 2024 18:53:30 -0400 Subject: [PATCH 21/28] Removed legacy moat code and added new tag, new component with script tag --- .../src/components/moat-tracking.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 packages/react-components/src/components/moat-tracking.tsx diff --git a/packages/react-components/src/components/moat-tracking.tsx b/packages/react-components/src/components/moat-tracking.tsx new file mode 100644 index 00000000..7398cc3e --- /dev/null +++ b/packages/react-components/src/components/moat-tracking.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { constructMoatData } from '@giphy/js-util' + +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 = + return scriptTag +} + +export default MoatTracking From 92415ff7c0f7dc923fcdc314a5e79e9fb523061f Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Thu, 2 May 2024 11:55:30 -0400 Subject: [PATCH 22/28] Added new moat tracking component to react gif component --- .../react-components/src/components/gif.tsx | 59 +------------------ 1 file changed, 3 insertions(+), 56 deletions(-) diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx index 3ef9a531..9a865f92 100644 --- a/packages/react-components/src/components/gif.tsx +++ b/packages/react-components/src/components/gif.tsx @@ -1,16 +1,9 @@ 'use client' import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors' import { IGif, IUser, ImageAllTypes } from '@giphy/js-types' -import { - Logger, - getAltText, - getBestRendition, - getGifHeight, - constructMoatData, - injectTrackingPixel, -} from '@giphy/js-util' +import { Logger, getAltText, getBestRendition, getGifHeight } from '@giphy/js-util' +import MoatTracking from './moat-tracking' import 'intersection-observer' -import moat from '@giphy/moat-loader' import React, { ElementType, ReactNode, SyntheticEvent, useContext, useEffect, useRef, useState } from 'react' import styled from 'styled-components' import * as pingback from '../util/pingback' @@ -19,8 +12,6 @@ import VerifiedBadge from './attribution/verified-badge' import { PingbackContext } from './pingback-context-manager' import { GifOverlayProps } from './types' -const moatLoader = moat.loadMoatTag('giphydisplay879451385633', 'https://giphyscripts.s3.amazonaws.com/moat/moatad.js') - const Container = styled.div` position: relative; display: block; @@ -60,11 +51,6 @@ export type EventProps = { onGifKeyPress?: (gif: IGif, e: SyntheticEvent) => void } -function useMutableRef(initialValue?: T) { - const [ref] = useState<{ current: T | undefined }>({ current: initialValue }) - return ref -} - type GifProps = { gif: IGif width: number @@ -144,8 +130,6 @@ const Gif = ({ const hoverTimeout = useRef() // fire onseen ref (changes per gif, so need a ref) const sendOnSeen = useRef<(_: IntersectionObserverEntry) => void>(noop) - // moat ad number - const moatAdNumber = useMutableRef() // are we displaying an ad const isAd = Object.keys(bottleData).length > 0 // custom pingback @@ -212,28 +196,8 @@ const Gif = ({ } } - const trackWithMoat = async () => { - if (shouldShowMedia && container.current) { - const { bottle_data: bottleData, response_id } = gif - const moatCompatibleData = constructMoatData(bottleData as any) - if (moatCompatibleData) { - moatCompatibleData.zMoatSession = response_id - await moatLoader - if (container.current) { - moatAdNumber.current = moat.startTracking(container.current, moatCompatibleData) - } - } - } - } - const onImageLoad = (e: SyntheticEvent) => { watchGif() - if (isAd) { - if (moatAdNumber.current === undefined) { - trackWithMoat() - } - injectTrackingPixel(bottleData.tags) - } onGifVisible(gif, e) // gif is visible, perhaps just partially setLoadedClassName(Gif.imgLoadedClassName) } @@ -250,23 +214,6 @@ const Gif = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [gif.id]) - const stopTracking = () => { - // if we have a moat ad number - if (moatAdNumber.current !== undefined) { - // stop tracking - moat.stopTracking(moatAdNumber.current) - // remove the moat ad number - moatAdNumber.current = undefined - } - } - - // if this component goes from showing an ad to not an ad - useEffect(() => { - if (!shouldShowMedia) { - return () => stopTracking() - } - }, [shouldShowMedia]) - useEffect(() => { showGifObserver.current = new IntersectionObserver(([entry]: IntersectionObserverEntry[]) => { const { isIntersecting } = entry @@ -283,7 +230,6 @@ const Gif = ({ if (showGifObserver.current) showGifObserver.current.disconnect() if (fullGifObserver.current) fullGifObserver.current.disconnect() if (hoverTimeout.current) clearTimeout(hoverTimeout.current) - stopTracking() } }, []) const height = forcedHeight || getGifHeight(gif, width) @@ -345,6 +291,7 @@ const Gif = ({ onLoad={shouldShowMedia ? onImageLoad : () => {}} /> + {isAd && } {Overlay && ( // only render the overlay on the client since it depends on shouldShowMedia From 9a45ef47f7c0753e9c99aeffd7ab6122490465c4 Mon Sep 17 00:00:00 2001 From: Nick Santaniello Date: Thu, 2 May 2024 13:49:13 -0400 Subject: [PATCH 23/28] restored vanilla js gif component to original state --- packages/components/src/components/gif.tsx | 54 +--------------------- 1 file changed, 2 insertions(+), 52 deletions(-) diff --git a/packages/components/src/components/gif.tsx b/packages/components/src/components/gif.tsx index f55382d3..f4ff018c 100644 --- a/packages/components/src/components/gif.tsx +++ b/packages/components/src/components/gif.tsx @@ -1,14 +1,6 @@ import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/js-brand' import { IGif, ImageAllTypes, IUser } from '@giphy/js-types' -import { - getAltText, - getBestRendition, - getGifHeight, - Logger, - constructMoatData, - injectTrackingPixel, -} from '@giphy/js-util' -import moat from '@giphy/moat-loader' +import { getAltText, getBestRendition, getGifHeight, Logger } from '@giphy/js-util' import { css, cx } from '@emotion/css' import { h } from 'preact' import { useContext, useEffect, useRef, useState } from 'preact/hooks' @@ -17,7 +9,6 @@ import AttributionOverlay from './attribution/overlay' import VerifiedBadge from './attribution/verified-badge' import { PingbackContext } from './pingback-context-manager' -const moatLoader = moat.loadMoatTag('giphydisplay879451385633', 'https://giphyscripts.s3.amazonaws.com/moat/moatad.js') const gifCss = css` display: block; &:focus { @@ -86,7 +77,6 @@ const noop = () => {} const Gif = ({ gif, - gif: { bottle_data: bottleData = {} }, width, height: forcedHeight, onGifRightClick = noop, @@ -122,10 +112,6 @@ const Gif = ({ const hoverTimeout = useMutableRef() // fire onseen ref (changes per gif, so need a ref) const sendOnSeen = useRef<(_: IntersectionObserverEntry) => void>(noop) - // moat ad number - const moatAdNumber = useMutableRef() - // are we displaying an ad - const isAd = Object.keys(bottleData).length > 0 // custom pingback const { attributes } = useContext(PingbackContext) @@ -166,19 +152,7 @@ const Gif = ({ fullGifObserver.current.disconnect() } } - const trackWithMoat = async () => { - if (shouldShowMedia && container.current) { - const { bottle_data, response_id } = gif - const moatCompatibleData = constructMoatData(bottle_data as any) - if (moatCompatibleData) { - moatCompatibleData.zMoatSession = response_id - await moatLoader - if (container.current) { - moatAdNumber.current = moat.startTracking(container.current, moatCompatibleData) - } - } - } - } + const onImageLoad = (e: Event) => { if (!fullGifObserver.current) { fullGifObserver.current = new IntersectionObserver( @@ -194,12 +168,6 @@ const Gif = ({ // observe img for full gif view fullGifObserver.current.observe(container.current) } - if (isAd) { - if (moatAdNumber.current === undefined) { - trackWithMoat() - } - injectTrackingPixel(bottleData.tags) - } onGifVisible(gif, e) // gif is visible, perhaps just partially setLoadedClassName(Gif.imgLoadedClassName) } @@ -211,23 +179,6 @@ const Gif = ({ setHasFiredSeen(false) }, [gif.id]) - const stopTracking = () => { - // if we have a moat ad number - if (moatAdNumber.current !== undefined) { - // stop tracking - moat.stopTracking(moatAdNumber.current) - // remove the moat ad number - moatAdNumber.current = undefined - } - } - - // if this component goes from showing an ad to not an ad - useEffect(() => { - if (!shouldShowMedia) { - return () => stopTracking() - } - }, [shouldShowMedia]) - useEffect(() => { showGifObserver.current = new IntersectionObserver(([entry]: IntersectionObserverEntry[]) => { const { isIntersecting } = entry @@ -244,7 +195,6 @@ const Gif = ({ if (showGifObserver.current) showGifObserver.current.disconnect() if (fullGifObserver.current) fullGifObserver.current.disconnect() if (hoverTimeout.current) clearTimeout(hoverTimeout.current) - stopTracking() } }, []) const height = forcedHeight || getGifHeight(gif, width) From 02eb77b5805e83b5febf36a533fada1489800078 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 2 May 2024 13:57:10 -0400 Subject: [PATCH 24/28] remove moat loader from components --- packages/components/package.json | 1 - yarn.lock | 8 -------- 2 files changed, 9 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index d582cd8b..5cff0f49 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -35,7 +35,6 @@ "@giphy/js-fetch-api": "*", "@giphy/js-types": "*", "@giphy/js-util": "*", - "@giphy/moat-loader": "^2.0.1", "bricks.js": "^1.8.0", "intersection-observer": "^0.11.0", "preact": "10.4.8", diff --git a/yarn.lock b/yarn.lock index 8a1bb6d5..2e2c1423 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2511,7 +2511,6 @@ __metadata: "@giphy/js-fetch-api": "*" "@giphy/js-types": "*" "@giphy/js-util": "*" - "@giphy/moat-loader": ^2.0.1 "@types/bricks.js": ^1.8.1 "@types/throttle-debounce": ^2.1.0 bricks.js: ^1.8.0 @@ -2558,13 +2557,6 @@ __metadata: languageName: unknown linkType: soft -"@giphy/moat-loader@npm:^2.0.1": - version: 2.0.1 - resolution: "@giphy/moat-loader@npm:2.0.1" - checksum: 9d35fe2baee8efe5d6aa7619d2de346a63422e81127d587e28f23d49f9d540ec339e6765444c1f892c116f093b1f632b78754f570ac489fdaeebbe51014d81ca - languageName: node - linkType: hard - "@giphy/react-components@workspace:packages/react-components": version: 0.0.0-use.local resolution: "@giphy/react-components@workspace:packages/react-components" From 54a58859bc665e9e0b7ef34244074ba5b870bb76 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 2 May 2024 13:58:24 -0400 Subject: [PATCH 25/28] recreate changeset --- .changeset/{warm-baboons-fold.md => fluffy-pots-notice.md} | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) rename .changeset/{warm-baboons-fold.md => fluffy-pots-notice.md} (64%) diff --git a/.changeset/warm-baboons-fold.md b/.changeset/fluffy-pots-notice.md similarity index 64% rename from .changeset/warm-baboons-fold.md rename to .changeset/fluffy-pots-notice.md index 1361ad34..d90fcbc4 100644 --- a/.changeset/warm-baboons-fold.md +++ b/.changeset/fluffy-pots-notice.md @@ -1,9 +1,8 @@ --- '@giphy/react-components': minor -'@giphy/js-components': minor '@giphy/js-fetch-api': minor '@giphy/js-types': minor '@giphy/js-util': minor --- -Readded MOAT tracking to react-sdk +Add moat ad tracking From d1851ca582060fe155b95e859ab8e590b9e36f32 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 2 May 2024 14:55:27 -0400 Subject: [PATCH 26/28] moat data updates --- .../src/components/moat-tracking.tsx | 22 ++++++--- .../react-components/stories/gif.stories.tsx | 45 ++++++++++++++++++- packages/util/src/index.ts | 1 - packages/util/src/tracking-pixel.ts | 15 ------- 4 files changed, 58 insertions(+), 25 deletions(-) delete mode 100644 packages/util/src/tracking-pixel.ts diff --git a/packages/react-components/src/components/moat-tracking.tsx b/packages/react-components/src/components/moat-tracking.tsx index 7398cc3e..71b80bcb 100644 --- a/packages/react-components/src/components/moat-tracking.tsx +++ b/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 = - 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('&:')}` + 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 e7cbd884..90ba4575 100644 --- a/packages/react-components/stories/gif.stories.tsx +++ b/packages/react-components/stories/gif.stories.tsx @@ -19,14 +19,27 @@ type GifComponentProps = React.ComponentProps type GifDemoProps = Omit & { 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() 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%', diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts index 20245dc3..41109bfa 100644 --- a/packages/util/src/index.ts +++ b/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' diff --git a/packages/util/src/tracking-pixel.ts b/packages/util/src/tracking-pixel.ts deleted file mode 100644 index d556097f..00000000 --- a/packages/util/src/tracking-pixel.ts +++ /dev/null @@ -1,15 +0,0 @@ -import DOMPurify from 'dompurify' - -const injectTrackingPixel = (tags: string[] = []) => { - tags.forEach((tag) => { - const el = document.createElement('html') - tag = tag.replace('%%CACHEBUSTER%%', Date.now().toString()) - el.innerHTML = DOMPurify.sanitize(tag) - const pixel = el.querySelector('img') - if (pixel) { - document?.querySelector('head')?.appendChild(pixel) - } - }) -} - -export default injectTrackingPixel From d7bab79144a5a66963dfc9ca8ff7a14631207ca3 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 2 May 2024 16:53:44 -0400 Subject: [PATCH 27/28] 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" From 94158d95c3b2df11f9c820571f2eacf8281e122e Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 2 May 2024 16:57:39 -0400 Subject: [PATCH 28/28] changeset --- .changeset/witty-singers-chew.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/witty-singers-chew.md diff --git a/.changeset/witty-singers-chew.md b/.changeset/witty-singers-chew.md new file mode 100644 index 00000000..e7161536 --- /dev/null +++ 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