Add Smart App Banner for the iOS app

https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners This used to exist in n-ui [1] but was removed during the migration to Page Kit. You can verify the app-id parameter here: https://apps.apple.com/app/apple-store/id1200842933 [1]: https://github.com/Financial-Times/n-ui/blob/07149f43/browser/layout/wrapper.html#L38
Financial-Times · May 19, 2021 · 65ce083 · 65ce083
1 parent 0b357c0
commit 65ce083
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/DocumentHead.test.tsx.snap b/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/DocumentHead.test.tsx.snap
@@ -53,6 +53,10 @@ Array [
     content="@twitter_page"
     property="twitter:site"
   />,
+  <meta
+    content="app-id=1200842933, app-argument=https://my.site"
+    name="apple-itunes-app"
+  />,
   <link
     href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg"
     rel="icon"

diff --git a/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap b/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap
@@ -56,6 +56,10 @@ exports[`dotcom-ui-shell/src/components/Shell renders the GTM script when the en
       content="@FinancialTimes"
       property="twitter:site"
     />
+    <meta
+      content="app-id=1200842933"
+      name="apple-itunes-app"
+    />
     <link
       href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg"
       rel="icon"

diff --git a/packages/dotcom-ui-shell/src/components/DocumentHead.tsx b/packages/dotcom-ui-shell/src/components/DocumentHead.tsx
@@ -43,6 +43,12 @@ const DocumentHead = (props: TDocumentHeadProps) => (
     <meta property="twitter:site" content={props.twitterSite} />
     <OpenGraph openGraph={props.openGraph} />
 
+    {/* native apps */}
+    <meta
+      name="apple-itunes-app"
+      content={props.canonicalURL ? `app-id=1200842933, app-argument=${props.canonicalURL}` : 'app-id=1200842933'}
+    />
+
     {/* packaging */}
     <link
       rel="icon"