Conversation
WalkthroughA new documentation file was added to provide detailed instructions for integrating a cookie consent system with a mobile application using a React Native WebView. The README was updated to reference this new integration guide, and minor formatting improvements were made to the "Page scripts" table for consistency. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant WebView
participant GTM
App->>WebView: Loads cookie consent page with custom User-Agent
WebView->>GTM: Fires page view trigger (User-Agent checked)
GTM->>WebView: Injects script (hides banner or opens modal)
WebView->>App: postMessage with consent status
App->>WebView: Show/hide WebView based on consent
App->>App: Store consent if valid
Suggested labels
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
- added markdown file `docs/integration-with-mobile-application.md` - added images - added new section "Integration with Mobile Application" in the README
tg666
force-pushed
the
feature/docs-mobile-app
branch
from
7ddbd03 to
6a384ad
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
docs/integration-with-mobile-application.md (4)
22-24: Drop the “in order to” verbosityYou can slim the sentence without losing meaning:
-Detection of the mobile app is necessary in order to determine whether the website is being rendered in a regular browser or within a WebView. +Detecting whether the site is rendered in a regular browser or in a WebView is required.
35-38: Fix subject-verb agreement in trigger description
{{navigator.userAgent}} contains MyAppis singular, so the follow-up sentence should read does not equal (singular), not do.-This trigger runs only within the mobile app context and on all URLs except `/mobile-app-cookies`. +This trigger runs only within the mobile-app context and on all URLs except `/mobile-app-cookies`.
59-61: Consider emphasising that the banner is hidden only inside WebViewA quick note clarifies that hiding
#cc--maindoes not affect the normal web experience.- Hides the cookie banner entirely using a `<style>` block so it does not appear within the WebView. +- Hides the cookie banner inside the WebView (the banner is still displayed in a regular browser) using a `<style>` block.
103-112: Guard againstCookieConsentWrappernot being available yet
CookieConsentWrapper.unwrap()can throw if the wrapper script hasn’t executed. Wrapping the call guards against race conditions:- var plugin = CookieConsentWrapper.unwrap(); + if (typeof CookieConsentWrapper === 'undefined') { + return; + } + var plugin = CookieConsentWrapper.unwrap();README.md (1)
196-199: Table header and body are mis-alignedThe pipe characters under the header row need exactly the same column count as the header itself, otherwise some Markdown renderers break the table.
-| Field | Description | -|---------------------|------------------------------------------------------------------------| +| Field | Description | +|---------------------|------------------------------------------------------------------------|
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
docs/images/integration-with-mobile-application/cmp-settings-environments.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-cmp-environment-settings.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-tag-settings.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-tag-webview.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-trigger-cookieConsent-mobileApp-settings.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-trigger-cookieConsent-mobileApp-webview.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-variable-cmp-environment.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-variable-user-agent.pngis excluded by!**/*.png
📒 Files selected for processing (2)
README.md(3 hunks)docs/integration-with-mobile-application.md(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: tg666
PR: 68publishers/cookie-consent#112
File: src/Ui/Utils.mjs:1-4
Timestamp: 2025-06-17T11:45:57.270Z
Learning: The cookie-consent plugin is designed to run in the main window only, so cross-realm JavaScript concerns (like iframe Element constructor differences) do not apply to this codebase.
README.md (1)
Learnt from: tg666
PR: 68publishers/cookie-consent#112
File: src/Ui/Utils.mjs:1-4
Timestamp: 2025-06-17T11:45:57.270Z
Learning: The cookie-consent plugin is designed to run in the main window only, so cross-realm JavaScript concerns (like iframe Element constructor differences) do not apply to this codebase.
docs/integration-with-mobile-application.md (1)
Learnt from: tg666
PR: 68publishers/cookie-consent#112
File: src/Ui/Utils.mjs:1-4
Timestamp: 2025-06-17T11:45:57.270Z
Learning: The cookie-consent plugin is designed to run in the main window only, so cross-realm JavaScript concerns (like iframe Element constructor differences) do not apply to this codebase.
🪛 markdownlint-cli2 (0.17.2)
README.md
26-26: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
docs/integration-with-mobile-application.md
17-17: Unordered list style
Expected: asterisk; Actual: dash
(MD004, ul-style)
18-18: Unordered list style
Expected: asterisk; Actual: dash
(MD004, ul-style)
59-59: Unordered list style
Expected: asterisk; Actual: dash
(MD004, ul-style)
60-60: Unordered list style
Expected: asterisk; Actual: dash
(MD004, ul-style)
🪛 LanguageTool
docs/integration-with-mobile-application.md
[style] ~22-~22: Consider a more concise word here.
Context: ...etection of the mobile app is necessary in order to determine whether the website is being ...
(IN_ORDER_TO_PREMIUM)
[grammar] ~35-~35: Possible agreement error. You should probably use: “Contain does” or “contains do”.
Context: ...nditions: 1. {{navigator.userAgent}} contains MyApp 2. {{Page Path}} does not equal /mobile-app-cookies This t...
(AGREEMENT_SENT_START)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
docs/integration-with-mobile-application.md (5)
8-14: Unify list-marker style
markdownlint(MD004) flags the asterisk bullets here because the repository generally uses dashes.
Switching to-keeps the linter quiet and avoids noisy diffs later.-* [Prerequisites](#prerequisites) -* [Mobile Application Detection](#mobile-application-detection) -* [GTM Trigger Setup](#gtm-trigger-setup) -* [GTM Tag Setup](#gtm-tag-setup) -* [How It Works](#how-it-works) -* [Integration with Consent Management Platform](#integration-with-consent-management-platform) +- [Prerequisites](#prerequisites) +- [Mobile Application Detection](#mobile-application-detection) +- [GTM Trigger Setup](#gtm-trigger-setup) +- [GTM Tag Setup](#gtm-tag-setup) +- [How It Works](#how-it-works) +- [Integration with Consent Management Platform](#integration-with-consent-management-platform)
22-24: Tighten the wordingThe phrase “necessary in order to” is verbose and triggered the
IN_ORDER_TO_PREMIUMstyle hint.-Detection of the mobile app is necessary in order to determine whether the website is being rendered in a regular browser or within a WebView. +Detecting the mobile app is necessary to determine whether the website is being rendered in a regular browser or within a WebView.
65-80: Remove unused variable / keep access consistent
var plugin = window.CookieConsentWrapper.unwrap();is assigned but never used, and elsewhere you reference the global without thewindow.prefix.
Either drop the variable or use it consistently to avoid dead code and future confusion.- var plugin = window.CookieConsentWrapper.unwrap(); + window.CookieConsentWrapper.unwrap(); // unwrap for side-effects if needed
154-159: Give the fenced block a recognised language
json5isn’t universally recognised and triggersMD040.
jsonc(JSON with comments) or plainjsonworks everywhere.-```json5 +```jsonc
60-60: Fix broken internal link fragment
#using-other-CDN-or-self-hosted(mixed case) is flagged byMD051.
Use the lower-case version that matches the README heading:-[Using other CDN or self-hosted](#using-other-CDN-or-self-hosted) +[Using other CDN or self-hosted](#using-other-cdn-or-self-hosted)README.md (1)
196-199: Restore back-ticks in the “Page scripts” tableThe update accidentally dropped the inline-code back-ticks around
<script>, changing rendering and meaning.-| Manage page scripts | Enable if you want to easily manage existing <script> tags. | +| Manage page scripts | Enable if you want to easily manage existing `<script>` tags. |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
docs/images/integration-with-mobile-application/cmp-settings-environments.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-cmp-environment-settings.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-tag-settings.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-tag-webview.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-trigger-cookieConsent-mobileApp-settings.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-trigger-cookieConsent-mobileApp-webview.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-variable-cmp-environment.pngis excluded by!**/*.pngdocs/images/integration-with-mobile-application/gtm-variable-user-agent.pngis excluded by!**/*.png
📒 Files selected for processing (2)
README.md(3 hunks)docs/integration-with-mobile-application.md(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: tg666
PR: 68publishers/cookie-consent#112
File: src/Ui/Utils.mjs:1-4
Timestamp: 2025-06-17T11:45:57.270Z
Learning: The cookie-consent plugin is designed to run in the main window only, so cross-realm JavaScript concerns (like iframe Element constructor differences) do not apply to this codebase.
README.md (1)
Learnt from: tg666
PR: 68publishers/cookie-consent#112
File: src/Ui/Utils.mjs:1-4
Timestamp: 2025-06-17T11:45:57.270Z
Learning: The cookie-consent plugin is designed to run in the main window only, so cross-realm JavaScript concerns (like iframe Element constructor differences) do not apply to this codebase.
docs/integration-with-mobile-application.md (1)
Learnt from: tg666
PR: 68publishers/cookie-consent#112
File: src/Ui/Utils.mjs:1-4
Timestamp: 2025-06-17T11:45:57.270Z
Learning: The cookie-consent plugin is designed to run in the main window only, so cross-realm JavaScript concerns (like iframe Element constructor differences) do not apply to this codebase.
🪛 markdownlint-cli2 (0.17.2)
README.md
26-26: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
docs/integration-with-mobile-application.md
19-19: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
20-20: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
21-21: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
22-22: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
23-23: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
24-24: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
25-25: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
26-26: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
27-27: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
28-28: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
29-29: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
30-30: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
31-31: Unordered list style
Expected: dash; Actual: asterisk
(MD004, ul-style)
60-60: Link fragments should be valid
Expected: #using-other-cdn-or-self-hosted; Actual: #using-other-CDN-or-self-hosted
(MD051, link-fragments)
216-216: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🪛 LanguageTool
docs/integration-with-mobile-application.md
[style] ~22-~22: Consider a more concise word here.
Context: ...etection of the mobile app is necessary in order to determine whether the website is being ...
(IN_ORDER_TO_PREMIUM)
[grammar] ~35-~35: Possible agreement error. You should probably use: “Contain does” or “contains do”.
Context: ...nditions: 1. {{navigator.userAgent}} contains MyApp 2. {{Page Path}} does not equal /mobile-app-cookies This t...
(AGREEMENT_SENT_START)
|
|
||
| ## Integration with Mobile Application | ||
|
|
||
| Integration with the mobile application is described in a separate document: |
There was a problem hiding this comment.
Avoid those duplications
| Integration with the mobile application is described in a separate document: | |
| See [Integration with Mobile Application](docs/integration-with-mobile-application.md). |
|
|
||
| Integration with the mobile application is described in a separate document: | ||
|
|
||
| [Integration with Mobile Application](docs/integration-with-mobile-application.md). |
| <h1 align="center">Integration with Mobile Application</h1> | ||
| </div> | ||
|
|
||
| This document describes the concept of integrating with a mobile application using a [WebView](https://github.com/react-native-webview/react-native-webview) component in **React Native**. |
There was a problem hiding this comment.
| This document describes the concept of integrating with a mobile application using a [WebView](https://github.com/react-native-webview/react-native-webview) component in **React Native**. | |
| This document describes the concept of integration with a mobile application using specific technologies – [WebView](https://github.com/react-native-webview/react-native-webview) components in **React Native**. However, the principles of this architectural design can be applied to other technologies. |
| ## Prerequisites | ||
|
|
||
| - **Cookie Consent** integrated via GTM | ||
| - A dedicated URL available on the website (e.g. `/mobile-app-cookies`) that renders no content. This page is used to display the cookie banner within the mobile application. |
There was a problem hiding this comment.
| - A dedicated URL available on the website (e.g. `/mobile-app-cookies`) that renders no content. This page is used to display the cookie banner within the mobile application. | |
| - A dedicated URL available on the website (e.g. `/mobile-app-consent`) that renders no content but is used to display the cookie banner within the mobile application. |
There was a problem hiding this comment.
Don't forget to replace mobile-app-cookies with mobile-app-consent in other places.
| @@ -0,0 +1,218 @@ | |||
| <div align="center" style="text-align: center; margin-bottom: 50px"> | |||
| <img src="images/logo.svg" alt="Cookie Consent Logo" align="center" width="250"> | |||
There was a problem hiding this comment.
We should use the logo only in the main readme. Please remove it from other docs
|
|
||
| This variable should then be used in the field **Integration > CMP API > Environment code**: | ||
|
|
||
| <img src="images/integration-with-mobile-application/gtm-cmp-environment-settings.png" alt="GTM Tag - CMP Environment settings" width="300"> |
There was a problem hiding this comment.
Add something like:
Preview
Here you can see an example of implementation.
cookie-consent-with-mobile-app.mov
2 participants
Summary by CodeRabbit