From 21ac46bada9ab19c7749a74a5cce99a095485f80 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 1 Aug 2022 17:55:13 -0500
Subject: [PATCH] Ad: fetch impression URL

---
 app/soapbox/features/ads/components/ad.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index aee9c374a5..95037a61a0 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
@@ -7,13 +7,24 @@ import { useAppSelector } from 'soapbox/hooks';
 import type { Card as CardEntity } from 'soapbox/types/entities';
 
 interface IAd {
+  /** Embedded ad data in Card format (almost like OEmbed). */
   card: CardEntity,
+  /** Impression URL to fetch upon display. */
+  impression?: string,
 }
 
 /** Displays an ad in sponsored post format. */
-const Ad: React.FC<IAd> = ({ card }) => {
+const Ad: React.FC<IAd> = ({ card, impression }) => {
   const instance = useAppSelector(state => state.instance);
 
+  // Fetch the impression URL (if any) upon displaying the ad.
+  // It's common for ad providers to provide this.
+  useEffect(() => {
+    if (impression) {
+      fetch(impression);
+    }
+  }, [impression]);
+
   return (
     <Card className='p-5' variant='rounded'>
       <Stack space={4}>