diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx
index e863a5e3b461..3fd85d2f6dcd 100644
--- a/frontend/common/utils/utils.tsx
+++ b/frontend/common/utils/utils.tsx
@@ -203,6 +203,9 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   getFlagsmithHasFeature(key: string) {
     return flagsmith.hasFeature(key)
   },
+  getFlagsmithJSONValue(key: string, defaultValue: any) {
+    return flagsmith.getValue(key, { fallback: defaultValue, json: true })
+  },
   getFlagsmithValue(key: string) {
     return flagsmith.getValue(key)
   },
diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
index 5daa7819a433..0137a1365778 100644
--- a/frontend/web/components/App.js
+++ b/frontend/web/components/App.js
@@ -282,12 +282,13 @@ const App = class extends Component {
     if (document.location.href.includes('widget')) {
       return <div>{this.props.children}</div>
     }
-    const announcementValue = JSON.parse(
-      Utils.getFlagsmithValue('announcement'),
-    )
+    const announcementValue = Utils.getFlagsmithJSONValue('announcement', null)
     const dismissed = flagsmith.getTrait('dismissed_announcement')
     const showBanner =
-      announcementValue && (!dismissed || dismissed !== announcementValue.id)
+      announcementValue &&
+      (!dismissed || dismissed !== announcementValue.id) &&
+      Utils.getFlagsmithHasFeature('announcement') &&
+      this.state.showAnnouncement
 
     return (
       <Provider store={getStore()}>
@@ -489,27 +490,24 @@ const App = class extends Component {
                               id={AccountStore.getOrganisation()?.id}
                             />
                           )}
-                          {user &&
-                            showBanner &&
-                            Utils.getFlagsmithHasFeature('announcement') &&
-                            this.state.showAnnouncement && (
-                              <Row>
-                                <InfoMessage
-                                  title={announcementValue.title}
-                                  infoMessageClass={'announcement'}
-                                  isClosable={announcementValue.isClosable}
-                                  close={() =>
-                                    this.closeAnnouncement(announcementValue.id)
-                                  }
-                                  buttonText={announcementValue.buttonText}
-                                  url={announcementValue.url}
-                                >
-                                  <div>
-                                    <div>{announcementValue.description}</div>
-                                  </div>
-                                </InfoMessage>
-                              </Row>
-                            )}
+                          {user && showBanner && (
+                            <Row>
+                              <InfoMessage
+                                title={announcementValue.title}
+                                infoMessageClass={'announcement'}
+                                isClosable={announcementValue.isClosable}
+                                close={() =>
+                                  this.closeAnnouncement(announcementValue.id)
+                                }
+                                buttonText={announcementValue.buttonText}
+                                url={announcementValue.url}
+                              >
+                                <div>
+                                  <div>{announcementValue.description}</div>
+                                </div>
+                              </InfoMessage>
+                            </Row>
+                          )}
                           {this.props.children}
                         </Fragment>
                       )}