Google Tag Manager
The Google Tag Manger for the Food Oasis website can be accessed by logging into the Chrome browser under the foodoasis@hackforla.org account (using the credentials in the 1Password Food Oasis DevOps vault). Then open a new browser window and type the url tagmanager.google.com in the address bar. This should take you to the home page, which might look something like this:
Clicking on the Container Name "Food Oasis Tag Manager" will navigate to the Tag Mangager Screen for Food Oasis.
If you contact John Darragh, access can also be granted to your individual email account, so you can view it from your own Chrome profile.
We use the NPM module react-gtm-module, version 2.0.11 to integrate Google Tag Manager with react. The basic tag is set up in the index.js component here. This sends the built-in GTM tags.
Note that React creates a Single Page Application, so there is typically only one "page view" when the app is first loaded, Navigating between views within the app is not considered a new "page view" in GTM out of the box, since it does not request a new page from the server. Instead React uses react-router and "client-side routing" to switch between views by swapping in different components within the page from javascript that is previously downloaded to the client. This is handled by something called "react router", which modifies the browser history (and hence the path part of the url). It's possible to raise tags when the client-side history changes, but I don't think we have done that on this project yet.
To definitively raise tags at specific points in the application, we added explicit code to raise GTM custom events within the javascript for various event handlers in the code. The code snippet looks like this:
window.dataLayer.push({
event: "viewDetail",
action: "click",
value: stakeholder.id,
name: stakeholder.name,
});
Which will raise a custom event called "viewDetail", which can be used as a trigger for a Google Tag, passing along the stakeholder.id and stakeholder.name as parameters to GTM. such events are raised by several different actions in the app:
- Selecting an organization on the map by clicking on the push pin or clicking on a listing in the list will raise a "viewDetail" event.
- Clicking on the "Get Directions" button on the Stakeholder Details panel will raise a ""getDirections" event.
- Clicking on the phone number link on the Stakeholder Details panel should raise a "dialPhone" event but doesn't at the moment - that's an oversight.
- Clicking on the "Get Directions" button on the Stakeholder Preview panel will also raise a "getDirections" event.
- Clicking on the "Call" Button on the StakeholderPreview Panel will raise the "dialPhone" event.
These custom events allow us to tag when a user uses the application to view the details of an org, or ask for directions, or dial the phone - these are the closest thing we have to a "conversion" in Food Oasis, as far as I can tell.
Click here for instructions.