diff --git a/frontend/components/analytics/PixelPing.tsx b/frontend/components/analytics/PixelPing.tsx new file mode 100644 index 00000000..40bdeb1f --- /dev/null +++ b/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 + + ); +}; diff --git a/frontend/templates/product/components/PixelPing.tsx b/frontend/templates/product/components/PixelPing.tsx index 2194b851..748d2ab3 100644 --- a/frontend/templates/product/components/PixelPing.tsx +++ b/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 - - ); +export const ProductPixelPing = ({ productcode }: { productcode: number }) => { + return ; }; diff --git a/frontend/templates/product/index.tsx b/frontend/templates/product/index.tsx index 23dc5232..3503b27d 100644 --- a/frontend/templates/product/index.tsx +++ b/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 = () => { })} {product.productcode && ( - + )} ); diff --git a/frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx b/frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx index 75928465..d1856728 100644 --- a/frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx +++ b/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[]; diff --git a/frontend/templates/troubleshooting/index.tsx b/frontend/templates/troubleshooting/index.tsx index a89826e4..79822c3f 100644 --- a/frontend/templates/troubleshooting/index.tsx +++ b/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 && ( )} + );