Trigger pageview on Google Tag Manager from thank you modal

Trigger pageview on Google Tag Manager from thank you modalAlejandro VargasBlockedUnblockFollowFollowingApr 2Trying to track your thank you modal on Google Tag Manager or Google Analytics? You are in the right place.

Sometimes we need to be able to register on GA our thank you page after submitting a form, but wait a second?! We don’t have a thank you page, all we have is a thank you modal on the same page of the form.

The ProblemI have a landing page with a subscription form.

Landing PageWhen the form has been submitted a thank you modal is shown, and GA doesn’t register a new pageview.

Thank you modalGoogle AnalyticsIf you have installed on your site GA without GTM, you can set programmatically the value of the page that the user is currently viewing.

We can hit a page view of our choice, in this case, we want to register the /thank-you page when the thank you modal is shown, we can add the following snippet to achieve this.

Google AnalyticsWith this code, we are telling GA to register a pageview on /thank-you page, you can change the third value for the page that you want to register.

It is worth pointing out that we are not changing the page value on the GA tracker, what this means is that after we send the pageview, all further interactions will not be registered on the /thank-you page.

For more information refer to Page Tracking documentation.

Google Tag ManagerNow the fun part, if you are using GTM there are several ways to accomplish this, the one that I prefer is creating a trigger that will look for the DOM of the thank you modal, and register a pageview on /thank-you.

1) On the GTM dashboard, we need to create a new variable for linking the GA account by clicking on the New button on the Variables’ tab.

New VariableFor the Variable Type, we need to select the Google Analytics Settings and then add our Tracking ID (this is the id from our GA account), finally, we just need to provide a name at the top and click save.

GA Variable2) Create a new trigger for the thank you modal, on the triggers’ tab click the New button.

New TriggerThank you modal visibleFor the Trigger Type, select Element Visibility — this will let us track changes on the DOM of our page.

Element Visibility triggers an event when an element, or elements, you specify shows in the browser’s viewport.

On Selection Method we have two options ID or a CSS Selector, in this case, I’m selecting ID and adding on the Element ID field the corresponding id of my modal.

For firing the trigger we have 3 options:Once every page: If multiple elements on a given page are matched by the ID or CSS Selector, this trigger will only fire the first time one of them is visible on that page.

Once per element: If multiple elements on a given page are matched by a CSS Selector, this trigger will fire the first time each one of them is visible on that page.

If multiple elements on a page have the same ID, only the first matched element will fire this trigger (unless it is subsequently removed by an observed DOM change).

Every time an element appears on screen: This trigger will fire every time a matched element becomes visible.

I’m selecting Every time an element appears on screen because if someone submits the form two times without reloading the page I want to register the two times that the thank you modal appears on the screen.

Another important thing to take into account is the Observe DOM changes option, this option track matching elements that appear as the DOM change.

I’m firing the thank you modal through a Vue component, and at the first load of the page the DOM doesn't exist, that is why I’m selecting this option.

3) Now on the tags’ tab, we need to create a new tag by clicking on the New button.

New TagGA — Thank you modalOn the Tag Type, we need to select Google Analytics-Universal Analytics so we can link the information of this tag to our GA account, on Track Type we chose Page View since we want to trigger a page view on /thank you page and then on Google Analytics Settings we select from the dropdown the variable that we create for GA.

On the trigger section we select the trigger that we created for the thank you page modal.

More SettingsIf we have checked the Enable overriding settings in this tag, we can override individual fields from the settings section.

On the More Settings > Fields to Set section we need to add a field with the Field Name of page (page is a built-in variable in GTM) and the Value of our page /thank-you.

Finally, we need to give the tag a name GA — Thank you modal and click save.

All the process is complete, new when the thank you modal is shown our trigger will be fired and we sent a pageview of /thank-you to the GA that we set up in our variable.

Google Analytics Real-TimeWe can verify that everything is working as expected by going into our GA account, navigate to Real-Time > Content, once we are there we can submit our form and we should see the /thank-you page as an active page on GA.

Have great reporting!!.LLAP ????.

. More details

Leave a Reply