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 && (
)}
+
);