Merge pull request #1792 from iFixit/vulcan-pixel-ping-for-correspond…

…ing-wiki-page

frontend/components/analytics/PixelPing.tsx

@@ -0,0 +1,25 @@
+import { PIXEL_PING_URL } from '@config/env';
+
+export const PixelPing = ({
+   type,
+   id,
+   site = 'ifixit',
+   lang = 'en',
+}: {
+   type: string;
+   id: number;
+   site?: string;
+   lang?: string;
+}) => {
+   if (!PIXEL_PING_URL) {
+      return null;
+   }
+
+   const intId = Math.trunc(id);
+   const key = `${site}/${type}/${intId}/${lang}`;
+   const url = `${PIXEL_PING_URL}?key=${encodeURIComponent(key)}`;
+   return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img src={url} width="1" height="1" alt="" style={{ display: 'none' }} />
+   );
+};

frontend/templates/product/components/PixelPing.tsx

@@ -1,13 +1,5 @@
-import { PIXEL_PING_URL } from '@config/env';
+import { PixelPing } from '@components/analytics/PixelPing';
 
-export const PixelPing = ({ productcode }: { productcode: string }) => {
-   if (!PIXEL_PING_URL) {
-      return null;
-   }
-   const key = `ifixit/product/${productcode}/en`;
-   const url = `${PIXEL_PING_URL}?key=${encodeURIComponent(key)}`;
-   return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img src={url} width="1" height="1" alt="" style={{ display: 'none' }} />
-   );
+export const ProductPixelPing = ({ productcode }: { productcode: number }) => {
+   return <PixelPing id={productcode} type="product" />;
 };

frontend/templates/product/index.tsx

@@ -26,7 +26,7 @@ import { ProductPreview } from '@models/components/product-preview';
 import { useInternationalBuyBox } from '@templates/product/hooks/useInternationalBuyBox';
 import * as React from 'react';
 import { LifetimeWarrantySection } from '../../components/sections/LifetimeWarrantySection';
-import { PixelPing } from './components/PixelPing';
+import { ProductPixelPing } from './components/PixelPing';
 import { SecondaryNavigation } from './components/SecondaryNavigation';
 import { useIsProductForSale } from './hooks/useIsProductForSale';
 import { useProductPageAdminLinks } from './hooks/useProductPageAdminLinks';
@@ -259,7 +259,7 @@ const ProductTemplate: NextPageWithLayout<ProductTemplateProps> = () => {
             })}
          </Box>
          {product.productcode && (
-            <PixelPing productcode={product.productcode} />
+            <ProductPixelPing productcode={parseInt(product.productcode)} />
          )}
       </React.Fragment>
    );

frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx

@@ -39,6 +39,7 @@ export type SolutionSection = Omit<
 
 export type TroubleshootingApiData = {
    title: string;
+   id: number;
    toc: string;
    introduction: Section[];
    solutions: ApiSolutionSection[];

frontend/templates/troubleshooting/index.tsx

@@ -51,6 +51,7 @@ import {
 import { BreadCrumbs } from '@ifixit/breadcrumbs';
 import { HeadingSelfLink } from './components/HeadingSelfLink';
 import ProblemCard from './Problem';
+import { PixelPing } from '@components/analytics/PixelPing';
 
 const Wiki: NextPageWithLayout<{
    wikiData: TroubleshootingData;
@@ -64,6 +65,7 @@ const Wiki: NextPageWithLayout<{
       canonicalUrl,
       mainImageUrl,
       mainImageUrlLarge,
+      id,
    } = wikiData;
    const { isOpen, onOpen, onClose } = useDisclosure();
    const metadata = (
@@ -185,6 +187,7 @@ const Wiki: NextPageWithLayout<{
             {wikiData.linkedProblems.length > 0 && (
                <RelatedProblems problems={wikiData.linkedProblems} />
             )}
+            <PixelPing id={id} type="wiki" />
          </Flex>
       </Flex>
    );