[GH Pages] Add footer for initial analytics collection

selector/src/App.tsx

@@ -1,13 +1,15 @@
 import { ContentSection } from '@components/ContentSection/ContentSection';
 import { FiltersPanel } from '@components/FiltersPanel/FiltersPanel';
+import { Footer } from '@components/Footer/Footer';
 import { Header } from '@components/Header/Header';
 
+import { analytics } from '@/shared/analytics/analytics';
 import { isEmbedded } from '@/shared/iframe-detector';
-
-import { NotebooksContext, useNotebooksSelector } from './shared/notebooks-context';
-import { initializeSelectorUrlPersist, useSelectorUrlPersist } from './shared/selectorUrlPersist';
+import { NotebooksContext, useNotebooksSelector } from '@/shared/notebooks-context';
+import { initializeSelectorUrlPersist, useSelectorUrlPersist } from '@/shared/selectorUrlPersist';
 
 const initialState = initializeSelectorUrlPersist();
+analytics.initialize(window.parent);
 
 function App(): JSX.Element {
   const notebooksSelector = useNotebooksSelector(initialState);
@@ -24,6 +26,7 @@ function App(): JSX.Element {
           </NotebooksContext.Provider>
         </div>
       </main>
+      {!isEmbedded && <Footer />}
     </>
   );
 }

selector/src/components/ContentSection/NotebooksList/NotebookCard/NotebookCard.tsx

@@ -10,6 +10,7 @@ import React, { CSSProperties, useRef, useState } from 'react';
 import { Button } from '@/components/shared/Button/Button';
 import { Tag } from '@/components/shared/Tag/Tag';
 import { Tooltip } from '@/components/shared/Tooltip/Tooltip';
+import { analytics } from '@/shared/analytics/analytics';
 import { copyToClipboard } from '@/shared/copy';
 import { isEmbedded } from '@/shared/iframe-detector';
 import { INotebookMetadata } from '@/shared/notebook-metadata';
@@ -25,10 +26,11 @@ const htmlToText = (value: string): string => {
   return div.textContent || value;
 };
 
-const openNotebookInDocs = ({ links }: INotebookMetadata) => {
+const openNotebookInDocs = ({ links, path }: INotebookMetadata) => {
   if (!links.docs) {
     return;
   }
+  analytics.sendNavigateEvent(path, links.docs);
   window.open(links.docs, isEmbedded ? '_parent' : '_blank');
 };
 
@@ -99,6 +101,9 @@ export const NotebookCard = ({ item, showTasks = true }: NotebookCardProps): JSX
                 text="View on GitHub"
                 icon={GitHubIcon}
                 href={item.links.github}
+                onClick={() => {
+                  analytics.sendNavigateEvent(item.path, item.links.github);
+                }}
               ></Button>
               {item.links.colab && (
                 <Button
@@ -108,6 +113,9 @@ export const NotebookCard = ({ item, showTasks = true }: NotebookCardProps): JSX
                   text="Open in Colab"
                   icon={ColabIcon}
                   href={item.links.colab}
+                  onClick={() => {
+                    analytics.sendNavigateEvent(item.path, item.links.colab!);
+                  }}
                 ></Button>
               )}
               {item.links.binder && (
@@ -118,6 +126,9 @@ export const NotebookCard = ({ item, showTasks = true }: NotebookCardProps): JSX
                   text="Launch in Binder"
                   icon={BinderIcon}
                   href={item.links.binder}
+                  onClick={() => {
+                    analytics.sendNavigateEvent(item.path, item.links.binder!);
+                  }}
                 ></Button>
               )}
               {item.status && (
@@ -138,6 +149,7 @@ export const NotebookCard = ({ item, showTasks = true }: NotebookCardProps): JSX
                   icon={LinkIcon}
                   onClick={() => {
                     copyNotebookShareUrl(item);
+                    analytics.sendCopyLinkEvent(item.path);
                     setLinkCopied(true);
                     setTimeout(() => setLinkCopied(false), 1000);
                   }}

selector/src/components/Footer/Footer.scss

@@ -0,0 +1,30 @@
+footer {
+  .footer-container {
+    display: flex;
+
+    padding-right: 1rem;
+    padding-left: 1rem;
+    background-color: var(--spark-color-theme-light-gray200);
+    border-top: 1px solid var(--spark-color-theme-light-gray400);
+    font-size: var(--spark-font-size-50);
+  }
+
+  .footer-list {
+    list-style-type: none;
+    display: inline-flex;
+    gap: 2rem;
+  }
+
+  a {
+    color: var(--spark-color-classic-blue);
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  #wap_dns,
+  #wap_nac {
+    display: none;
+  }
+}

selector/src/components/Footer/Footer.tsx

@@ -0,0 +1,55 @@
+import './Footer.scss';
+
+export const Footer = (): JSX.Element => {
+  return (
+    <footer>
+      <div className="footer-container">
+        <ul className="footer-list">
+          <li>© Intel Corporation</li>
+          <li>
+            <a
+              href="https://docs.openvino.ai/2024/about-openvino/additional-resources/terms-of-use.html"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Terms of Use
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.intel.com/content/www/us/en/privacy/intel-cookie-notice.html"
+              target="_blank"
+              data-cookie-notice="true"
+              rel="noreferrer"
+            >
+              Cookies
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.intel.com/content/www/us/en/privacy/intel-privacy-notice.html"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Privacy
+            </a>
+          </li>
+          <li data-wap_ref="dns" id="wap_dns">
+            <a href="/#" target="_parent">
+              Your Privacy Choices
+            </a>
+          </li>
+          <li id="footer_it_problem_fix_do_not_remove"></li>
+          <li data-wap_ref="nac" id="wap_nac">
+            <a
+              href="https://www.intel.com/content/www/us/en/privacy/privacy-residents-certain-states.html"
+              target="_parent"
+            >
+              Notice at Collection
+            </a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+};

selector/src/components/shared/Button/Button.tsx

@@ -66,7 +66,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         target="_blank"
         rel="noreferrer"
         aria-label={text}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.();
+        }}
       >
         {buttonContent}
       </a>

selector/src/main.tsx

@@ -4,7 +4,14 @@ import '@/shared/iframe-message-emitter';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+import { addAnalyticsScript } from '@/shared/analytics/analytics.ts';
+
 import App from './App.tsx';
+import { isEmbedded } from './shared/iframe-detector.ts';
+
+if (!isEmbedded) {
+  addAnalyticsScript();
+}
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

selector/src/shared/analytics/adobeAnalytics.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    wap_tms?: {
+      custom?: {
+        trackComponentClick?: (componentName: string, value: string) => void;
+      };
+    };
+  }
+}
+
+export {};

selector/src/shared/analytics/analytics.ts

@@ -0,0 +1,92 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const once = function <T extends (...args: any[]) => any>(fn: T) {
+  let result: ReturnType<T>;
+  let invoked = false;
+
+  return function (...args: Parameters<T>): ReturnType<T> {
+    if (invoked) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return result;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    result = fn(args);
+    invoked = true;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return result;
+  };
+};
+
+export function addAnalyticsScript(): void {
+  const host = window.document.location.protocol == 'http:' ? 'http://www.intel.com' : 'https://www.intel.com';
+  const url = host + '/content/dam/www/global/wap/tms-loader.js'; // wap file url
+  const scriptElement = document.createElement('script');
+  scriptElement.type = 'text/javascript';
+  scriptElement.async = true;
+  scriptElement.src = url;
+  const headElement = document.getElementsByTagName('head')[0];
+  headElement.appendChild(scriptElement);
+}
+
+enum COMPONENT {
+  NAVIGATE = 'ov-notebooks:navigate',
+  COPY_LINK = 'ov-notebooks:copy-link',
+}
+
+type AdobeTrackFn = (componentName: COMPONENT, label: string, detail?: string) => void;
+
+function getAdobeAnalyticsFunction(window: Window): AdobeTrackFn | null {
+  if (typeof window.wap_tms?.custom?.trackComponentClick !== 'function') {
+    return null;
+  }
+
+  return window.wap_tms.custom.trackComponentClick.bind(window.wap_tms.custom);
+}
+
+class Analytics {
+  private _window?: Window;
+  private _consoleNotification = {
+    notInitialized: once(() => console.log('Analytics is not initialized.')),
+    notFound: once(() => console.log('Analytics is not found on the page.')),
+    devMode: once(() => console.log('Analytics is in dev mode.')),
+  };
+
+  initialize(window: Window) {
+    this._window = window;
+  }
+
+  private _send: AdobeTrackFn = (component, label, detail) => {
+    if (!this._window) {
+      this._consoleNotification.notInitialized();
+      return;
+    }
+
+    if (import.meta.env.DEV) {
+      this._consoleNotification.devMode();
+      console.log(`[Analytics] Component: ${component}\n\tLabel: ${label}\n\tDetail: ${detail}`);
+    }
+
+    const adobeSend = getAdobeAnalyticsFunction(this._window);
+
+    if (!adobeSend) {
+      this._consoleNotification.notFound();
+      return;
+    }
+
+    try {
+      adobeSend(component, label, detail);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  sendNavigateEvent(notebookPath: string, url: string): void {
+    this._send(COMPONENT.NAVIGATE, notebookPath, url);
+  }
+
+  sendCopyLinkEvent(notebookPath: string): void {
+    this._send(COMPONENT.COPY_LINK, notebookPath);
+  }
+}
+
+export const analytics = new Analytics();