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,
- }
- }
-}