frontend_API
This module component fetches Google Analytics report data from your site's GA4 statistics and returns a JSON object that can be accesses via Liquid or displayed as an interactive chart.
Parameters and Options
frontend_API
/api/frontend/ga4_run_report
/api/frontend/secure_zone_subscribers_analytics
<REQUEST OBJECT>
<path/to/layout>
Path to file that will contain the Liquid layout content to be parsed.
If the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable
parameter.
<yourLiquidVariableName>
Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.
Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.
GET
Google Analytics Report API
Retrieve customised report data on your site's statistics via the Google Analytics integration.
The GA4 data is only accessible if your site is configured with GA4 analytics in the site settings.
Request / Response:
Construct your request to the report API using the JSON structure described in Google's 'runReport' documentation.
Below is an example request and response:
Chart Include
A chart layout of the report data can also be rendered, with start and end date controls, using the below Liquid include:
This include can also be generated via the Component Manager, in the "Frontend API" section, along with some other attributes to further configure the output as detailed below:
Chart Include Parameters
<YYYY-MM-DD>
The starting date of the report data.
When constructing the include tag via the Component Manager, if no date provided, the default date is set to today's date minus 1 month.
<YYYY-MM-DD>
The end date of the report data.
When constructing the include tag via the Component Manager, if no date provided, the default date is set to today's date.
<EVENT NAME>
The name of the analytics tracking event you wish to report on.
When constructing the include tag via the Component Manager, if no value if provided, the default event used is page_view
.
<REQUEST OBJECT>
You can optionally provide a custom request object in JSON format for more advanced report configurations (see the API request structure above).
If a value is provided here, all other parameters above will be ignored.
GET
Secure Zone Subscribers API
Retrieve customised report data from your site's secure zone statistics via the Google Analytics integration.
The GA4 data is only accessible if your site is configured with GA4 analytics in the site settings.
Request / Response:
Construct your request to the report API using the JSON structure described below:
Chart Include
A chart layout of the report data can also be rendered, with group type, start and end date controls, using the below Liquid include:
This include can also be generated via the Component Manager, in the "Frontend API" section, along with some other attributes to further configure the output as detailed below:
Chart Include Parameters
<YYYY-MM-DD>
<YYYY-MM-DD>
The end date of the report data.
When constructing the include tag via the Component Manager, if no date provided, the default date is set to today's date.
Day (default)
Week
Month
Year
The grouping period you wish the report to start on.
When constructing the include tag via the Component Manager, if no value if provided, the default of Day
is used.
<ID1>,<ID2>,<ID3>
A comma-separated string of the secure zone IDs you wish to report on.
When constructing the include tag via the Component Manager, if no value if provided, the default will report on all secure zones.
<REQUEST OBJECT>
You can optionally provide a custom request object in JSON format for more advanced report configurations (see the API request structure above).
If a value is provided here, all other parameters above will be ignored.
API Restrictions
Enable/disable access to the Google Analytics API data for frontend users and control the type of users that can access it.
For more information on configuring API restrictions, see Frontend API Restrictions.
Accessing the Data
JSON Output
You can output the full JSON for your component data by referencing the root Liquid object {{this}}
in your custom layout file, or directly on your page, if using the collectionVariable
parameter in your component tag.
For example:
You can then render the JSON like so:
For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.
Rendering Property Values
This data is accessible in two main ways:
1. Using Liquid in the specified layout file via the this
object, eg:
2. Directly on the Page or Template via a Liquid Collection if collectionVariable
was added to the Component tag.
An example using collectionVariable
with value "reportData":
Here we suppress any Layout file from rendering by setting layout: ""
as an empty attribute.
Looping through the collection to render all the dimension headers in a list, giving us:
- date
- eventName
- customEvent:coupon_code
- customEvent:user
The code:
Accessing a specific item within the collection. In this case the third header item (zero based index), which in our example would render the value customEvent:coupon_code