Articles in this section

Sending events to Google Analytics via Google Tag Manager

Steve Jones
  • Updated

Please Note:

This article is for merchants who have NOT YET migrated their legacy post-purchase pages over to use Shopify's upgrade-safe app block compatible post-purchase pages.

 

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:

Depending on when you created your survey, you will either have a multi-question capable survey or our legacy single-question only survey. Surveys created before January 10th 2024 are legacy single-question only surveys. Anything created after that date will automatically be a multi-question capable survey (even if it only contains a single question).

 

Survey dataLayer events

For an overview of the variables used within our events, please see our Google Analytics integration article.

Legacy single-question survey events

We fire 2 events into the dataLayer that can be picked up by Google Analytics for our legacy single-question surveys. The first event is fired when the survey is viewed and the second event is fired if/when the survey is submitted. Below you will find the GTM compatible dataLayer events for legacy single-question surveys:

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 survey is submitted:

window.dataLayer.push({
     event: 'survey_response',
     survey_name: {{survey_name}},
     survey_code: {{survey_code}},
     answer': {{answer}},
});

Multi-question survey events

The events that we fire into the dataLayer are slightly different for multi-question enabled surveys. Some of these events will fire more than once if the survey contains multiple questions. Below you will find the GTM compatible dataLayer events for multi-question enabled surveys:

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 Grapevine Surveys 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 Grapevine Surveys 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.

Related articles