This article provides an overview of how to send Grapevine Survey events into Google Analytics using Google Tag Manager. This article presumes that you already know how to use Google Tag Manager (GTM).
Please note:
Our Google Analytics integration only works with Grapevine Surveys that were created after January 10th 2024.
Surveys created before then are known as legacy single-question surveys and are not compatible with our Google Analytics integration. You can, however, recreate any of your older surveys, which will then automatically be compatible with our Google Analytics integration.
For this integration to work, you will need to have Google Analytics already set-up in your store.
Enabling the Google Tag Manager integration for onsite/embedded surveys
You can enable Google analytics via the Integrations page within the Grapevine Surveys app. Click on the More details button within the Google Analytics card:
On the next page, click the Enable Google Analytics Integration button:
The page will update to show that the integration has been enabled:
That's all you need to do to enable your onsite and embedded surveys to start sending events into Google Tag Manager
Enabling Google Tag Manager for post-purchase surveys
If you have set-up post-purchase surveys and have added the Grapevine Survey app block to your Thank You Page, then you will need to map the Google Analytics events to the corresponding Shopify Analytics events.
Please note:
Unfortunately, surveys that appear on the Order Status Page are unable to send events to Google Analytics. Only surveys on the Thank You Page (the page that is shown once immediately after checkout) contains the data needed for the events.
You will either need to create a custom pixel within your Shopify Admin or, if you already have a custom pixel that loads the GA code and listens for other events, then you can modify that pixel to include the Grapevine Survey events.
Setting up the custom pixel for post-purchase surveys
We'll look at this as if you are creating a new custom pixel.
Create a new custom pixel from your Shopify Admin by going to Settings > Customer events
Click on the Add custom pixel button:
Give your custom pixel a name, e.g. Grapevine Surveys:
Put the following javascript code into the code block:
...awaiting example code
Important:
You must replace GTM-XXX1234 within the code with your GTM ID.
You can find your GTM ID in with Google Tag Manager under the Admin section.
Once you have replaced the example GTM ID in the code with your own GTM ID, click Save at the the top of the page to save your custom pixel.
The Connect option will then become available. Click Connect and then read the warning in the dialogue box.
If you are happy to proceed, click Connect again:
That's it for the custom pixel. Your Grapevine Surveys events are now mapped from Shopify Analytics into Google Tag Manager events.
Survey dataLayer events
For an overview of the variables used within our events, please see our Google Analytics integration article.
Survey events
Some of the events that we fire into the dataLayer will fire more than once if the survey contains multiple questions
Survey viewed event
This event is fired when the survey is presented on the page:
window.dataLayer.push({
event: 'survey_viewed',
survey_name: {{survey_name}},
survey_code: {{survey_code}},
});
Survey response event
This event is fired when the at least one question in the survey is answered by the respondent:
window.dataLayer.push({
event: 'survey_response',
survey_name: {{survey_name}},
survey_code: {{survey_code}},
});
Survey question answered
This event is fired after each answer in the survey is provided:
window.dataLayer.push({
event: 'survey_answer',
survey_name: {{survey_name}},
survey_code: {{survey_code}},
question: {{question.text}},
question_code: {{question.code}},
answer: {{answer}},
});
Survey completed
This event is fired if the respondent gets to the last question in the survey and answers it:
window.dataLayer.push({
event: 'survey_completed',
survey_name: {{survey_name}},
survey_code: {{survey_code}},
});
GTM event mapping
Within GTM, start by creating a GTM user defined variable for each variable contained within the custom pixel events. You may as well create them all at the same time. Here are the variables that you'll need to create in GTM:
survey_name
survey_code
question
question_code
answer
Now you'll need to create GTM triggers for each of the four events that are defined for Grapevine Surveys that your custom pixel pushes into the dataLayer:
survey_viewed
survey_response
survey_answer
survey_completed
Lastly, now that you have your GTM user defined variables and GTM triggers, you'll need to create a GTM tag for each GTM trigger, making sure to add the appropriate GTM user defined variables as Event parameters.
Need any help?
If you have any questions about the content of this article or any other Grapevine Surveys related question, then please do just get in touch.