Implement Google Tag container lookup and destinations list JS selectors

[felixarntz]

JS selectors to access the REST data points added in #6078 should be added to the analytics-4 store.

---

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

Acceptance criteria

• The modules/analytics-4 store should receive a new selector getGoogleTagContainer( measurementID ).
  • The selector should wrap the GET:container-lookup endpoint implemented in Implement Google Tag container lookup and destinations list REST data points #6078.
• The modules/analytics-4 store should receive a new selector getGoogleTagContainerDestinations( gtmAccountID, gtmContainerID ).
  • The selector should wrap the GET:container-destinations endpoint implemented in Implement Google Tag container lookup and destinations list REST data points #6078.

Implementation Brief

Create a new file, containers.js in assets/js/modules/analytics-4/datastore with the following:

Creating Fetch stores

• Create a fetch store for the new endpoint GET:container-lookup using the createFetchStore function with the following details:
  • baseName: getGoogleTagContainer
  • controlCallback: receives the measurementID and returns the API.get() method that calls the container-lookup endpoint and passes the measurementID.
  • reducerCallback: receives state and container (API response) and returns the container along with the existing state.
  • validateParams: validates the measurementID is not empty.
• Create a fetch store for the new endpoint GET:container-destinations using the createFetchStore function with the following details:
  • baseName: getGoogleTagContainerDestinations.
  • controlCallback: receives the gtmAccountID and gtmContainerID and returns the API.get() method that calls the container-destinations endpoint and passes the gtmAccountID and gtmContainerID.
  • reducerCallback: receives state and containerDestinations list (API response) and returns the containerDestinations along with the existing state.
  • validateParams: validates the gtmAccountID and gtmContainerID are not empty.
• The baseInitialState should have container and containerDestinations initialized to undefined.

Creating Resolvers

• Create a new resolver for getGoogleTagContainer with the following:
  • Receives measurementID as a parameter.
  • Returns early if measurementID is empty.
  • Returns early if there is an existing container.
  • Otherwise, dispatches the fetchGetGoogleTagContainer action with the measurementID parameter passed.
• Create a new resolver for getGoogleTagContainerDestinations with the following:
  • Receives gtmAccountID and gtmContainerID as parameters.
  • Returns early if gtmAccountID or gtmContainerID is empty.
  • Returns early if there are existing containerDestinations.
  • Otherwise, dispatches the fetchGetGoogleTagContainerDestinations action with the gtmAccountID and gtmContainerID parameters passed.

Creating Selectors

• Create a new selector, getGoogleTagContainer with the following:
  • Receives state as a parameter.
  • Returns the container from the state.
• Create a new selector getGoogleTagContainerDestinations with the following:
  • Receives state as a parameter.
  • Returns the containerDestinations from the state.
• Create the store using Data.combineStores() and export it as we do in other partial data stores.
• In assets/js/modules/analytics-4/datastore/index.js, import the containers.js and pass it to Data.combineStores().
• In Implement Google Tag container lookup and destinations list REST data points #6078 IB, it was mentioned the Analytics_4::create_data_request method receives an optional parameter destinationID. So make it a required parameter and change it to measurementID if it was destinationID.

Test Coverage

• Add tests for the getGoogleTagContainer and getGoogleTagContainerDestinations selectors.

QA Brief

• Ensure the gteSupport feature flag is available.
• Ensure to clear the session storage.
• Execute the getGoogleTagContainer selector from the browser console and verify it returns the container object if available.

googlesitekit.data.select('modules/analytics-4').getGoogleTagContainer('G-2C8N8YQ1L7')

• Replace the value of G-2C8N8YQ1L7 with your measurementID(destinationID). It can be obtained from the GTM console.
• Execute the getGoogleTagContainerDestinations endpoint from the browser console and verify it returns the destination array if available. Otherwise an empty array.

googlesitekit.data.select('modules/analytics-4').getGoogleTagContainerDestinations('6065482709', '98367161')

• Replace the value of the accountID and containerID with the response from the getGoogleTagContainer selector. See:
  

Changelog entry

• Implement selectors and associated logic for looking up Google Tag containers and destinations.

[tofumatt]

IB ✅

[mohitwp]

QA Update ✅

• Ran the code in the QAB and confirmed that it ran successfully with no errors. See screenshots for the results.
• I also used the containers lookup and destination list tools to make sure the results were the same.