add ad viewlink

Author: Chouikane

src/features/ads/components/BannerAd.css

@@ -57,3 +57,9 @@
   bottom: 0;
   right: 0;
 }
+
+.hidden {
+  width: 0;
+  height: 0;
+  display: none;
+}

src/features/ads/components/BannerAd.tsx

@@ -24,43 +24,40 @@ export const BannerAd = () => {
 
   return (
     <div className="ad-wrapper blockRow">
-      {ad && (
-        <div id="bannerads">
-          <span>
-            <span className="wrap">
-              <a
-                href={ad.link}
-                className="img"
-                target="_blank"
-                rel="noopener sponsored noreferrer"
-                title={ad.title}>
-                <img
-                  src={ad.imageUrl}
-                  alt={ad.title}
-                  height="100"
-                  width="130"
-                  style={{ border: 0 }}
-                />
-              </a>
-
-              <a
-                href={ad.link}
-                className="text"
-                target="_blank"
-                rel="noopener sponsored noreferrer">
-                {ad.description}
-              </a>
-            </span>
-
+      <div id="bannerads">
+        <span>
+          <span className="wrap">
             <a
-              href={ad.provider.link}
-              className="poweredby"
+              href={ad.link}
+              className="img"
               target="_blank"
-              rel="noopener sponsored noreferrer">
-              {ad.provider.title}
+              rel="noopener sponsored noreferrer"
+              title={ad.title}>
+              <img
+                src={ad.imageUrl}
+                alt={ad.title}
+                height="100"
+                width="130"
+                style={{ border: 0 }}
+              />
+            </a>
+
+            <a href={ad.link} className="text" target="_blank" rel="noopener sponsored noreferrer">
+              {ad.description}
             </a>
           </span>
-        </div>
+
+          <a
+            href={ad.provider.link}
+            className="poweredby"
+            target="_blank"
+            rel="noopener sponsored noreferrer">
+            {ad.provider.title}
+          </a>
+        </span>
+      </div>
+      {ad.viewUrl && (
+        <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="Pixel" />
       )}
     </div>
   )

src/features/ads/types/index.ts

@@ -8,6 +8,7 @@ export type Ad = {
   title?: string,
   description: string,
   imageUrl: string,
+  viewUrl?: string,
   link: string,
   backgroundColor?: string,
   provider: AdProvider,