This is an outdated article. Please find the latest documentation describing GA4 events setup for VFR on the WANNA documentation portal: https://docs.wanna.fashion/vfr/googleanalytics/
Requirements
- WANNA Virtual Fitting Room (VFR) is integrated into a website as an iframe
- Google Tag Manager (GTM) is installed on the target website
- Google Analytics 4 (GA4) is used to track events on the target website
Setup
There are just three easy steps:
- Import WANNA's JSON into your GTM account: https://raw.githubusercontent.com/WANNABY/wanna-virtual-fitting-room-samples/master/files/WANNA_VFR_GTM.json
- Link WANNA's GA4 tag with your GA4 ID in a couple of clicks.
- Publish your GTM container.
the chapter below will guide you through this process step-by-step.
The GTM interface may change after this guide is published. If you notice that the screenshots provided do not match what you see in GTM, please do not hesitate to ask for our assistance.
Import WANNA's JSON into your GTM account
Go to Admin settings and select Import Container.
Click “Choose container file”.
Attach the file "WANNA_VFR_GTM.json" from your computer. Click "Existing" in the "Choose workspace" section. There might be several workspaces or just one. Usually, you need “Default Workspace”. Click on it to select.
GTM will show you how many items will be added.
Notice that by default GTM selects the “Overwrite” import option. In this case, it will delete all of the items that you have in your account. DO NOT LEAVE THIS OPTION SELECTED. Please, select the “Merge” option.
However, even if somebody accidentally deleted items, GTM has versioning and such actions may be undone within 30 days.
After you click “Confirm” items will be loaded into your workspace.
Link WANNA's GA4 tag with your GA4 ID
Go to Tags in the left menu. You will see all your tags and two Wanna newly added tags.
Click on “Wanna Google Analytics 4 Events”.
Click on the “Tag Configuration” area.
Now you need to replace “G-11111111111” with your GA4 “Measurement ID”.
There might be two cases:
-
You have GA4 Configuration Tag in your GTM.
In this case, select it in the “Configuration Tag” option.
Then your settings will look like this. The name “Your Google Analytics 4 Configuration Tag” will be replaced with the actual name of your tag.
-
You don’t have GA4 Configuration Tag in your GTM.
Usually, this means that for some reason GA4 is hardcoded into your website’s source code.
In this case, you just need to find your GA4 Measurement ID. This is Google’s article - how to find your Measurement ID: https://support.google.com/analytics/answer/9539598?hl=en
Note that Measurement ID starts with capital G and looks like this: “G-XXXXXXXXX”.
After you find it, place it into GTM Tag instead of “G-1111111111”.
Your settings should look like this:
Click “Save”.
Publish your GTM container
Click the “Submit” button in the top right corner.
Optionally name this version, for example “Added Wanna events” and click “Publish” in the top right corner.
After the publishing process is complete, you will see a summary of your current workspace.
Congratulations! You are done. Now, events from the WANNA Virtual Fitting Room will be sent to your GA4 account, enriching your own data.
Test the analytics events
You can easily test events sent by the WANNA Virtual Fitting Room on your desktop browser using the browser's developer console.
- Open the webpage that runs the WANNA Virtual Fitting Room in the Google Chrome browser.
- Launch the developer console: Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
-
Select the Pixel 5 device for the screen dimensions.
Now you can work with camera on your desktop and receive all the events from the WANNA Virtual Fitting Room.