Finalize TwG tag placement implementation based on updated script API

[felixarntz]

The TwG JS snippet was originally configured in #5450, however the underlying TwG JS library is being updated to satisfy the additional requirements and options that need to be available for the TwG launch (for which Site Kit is already receiving the necessary options, e.g. the color customization).

Once the JS library is updated, we need to make sure to pass the configuration parameters to it correctly based on the TwG module settings in Site Kit.

This issue is effectively blocked until the updated version of the TwG JS snippet has been launched.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The parameters passed to the TwG JS snippet initialization call need to be updated to reflect the API updates:
  • The buttonPosition should be replaced with a promptSettings object with properties:
    • style: This should support/use the same value as today, either "inline" or "floating".
    • floatingPromptProminence: This only needs to be present if the above style is "floating". It also means the corresponding module setting is either "dynamic_high" or "dynamic_low". Based on that, the supported values for this field are either "high" or "low".
  • A new colorTheme parameter should be added which should simply have the color slug from the module setting as value.
• Note that the changes needed in the thank.js library from TwG side may not have launched yet as this issue is implemented. If so, this needs to be purely a QA: Eng issue for the time being. Of course it will need to be launched before the eventual e2e test, preferably before the bug bash.

Implementation Brief

In includes/Modules/Thank_With_Google/Web_Tag.php:

• Add a new instance variable and setter for the colorTheme setting.
• Update the enqueue_twg_script method:
  • Ensure the JS file location in $twg_src is correct, update if the new version has a new URL.
  • Replace the buttonPosition property with promptSettings, with an object as the value. This object should have the following properties:
  • style: Use the existing buttonPosition value.
  • floatingPromptProminence (optional): This property should be defined only when style is "floating". Check $this->cta_placement, which should have the value "dynamic_high" or "dynamic_low" (see constants PLACEMENT_DYNAMIC_HIGH or PLACEMENT_DYNAMIC_LOW). Set the floatingPromptProminence value to "high" or "low" accordingly.
  • Add a new colorTheme property with the value of the colorTheme setting.

In includes/Modules/Thank_With_Google.php, update the register_tag method:

• Call the new colorTheme setter to pass the color theme setting to the Web Tag.

Test Coverage

• No new tests needed.

QA Brief

• Activate and connect TwG module.
• Go to a single post page and verify that you see the inline script for the TwG is added (search for SWG_BASIC).
• Verify that you see the colorTheme property that is added with the color that you selected in the TwG settings.
• Verify that you see the promptSettings property that has the style field with either inline or floating value based on the TwG settings (for fixed type it should be inline, for overlay it should be floating).
• Verify that you see the floatingPromptProminence property only for the overlay type and its value is based on the prominence setting.

Changelog entry

• Update Thank with Google JS snippet parameters to reflect API updates.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Verified a single post page the inline script for the TwG (SWG_BASIC) is added successfully.
• Verified that colorTheme property added as per TWG settings.
• Verified that promptSettings property have style field with either inline or floating value based on the TwG settings.
• Fixed- Inline
• Overlay - Floating.
• Verified thatfloatingPromptProminence property shows only for the overlay type and its value is based on the prominence setting.
• Verified for both 'Fixed' and 'Overlay' type.

Overlay type :   TWG Script:  Prominence : High   Type : Fixed