1. Uberflip Help
  2. Apps & integrations
  3. Integrating with Google: Analytics, Tag Manager, and Search Console

Track Google Ads Conversions on Form CTA Submissions

Follow
Avatar
Dylan Foster
Last Updated:

Objective

I've set up an ad campaign in Google Ad Manager, and now I'd like to track the performance of the ad conversions based on Uberflip Form CTA submits.

 

Prerequisite: Set Up a Google Ad Manager Campaign

To get started, you'll need to create your campaign in Google Ad Manager, and set up a conversion tracking. Once that is complete, you'll copy the Conversion ID and Conversion label that will be used later on in Google Tag Manager (GTM).

You can find instructions on how set up conversion tracking in this article from Google:

Google: Set up conversion tracking for your website

Follow the instructions in this article until you reach the end of "Step 1: Create a conversion action". Then, continue on the next steps in this article.

 

Step 1: Configure your Tag in Google Tag Manager (GTM)

  1. Create a new Google Ads Conversion Tracking tag in GTM and name it anything you'd like.
  2. Once created, you'll need to define at a minimum the "Conversion ID" and the "Conversion Label" - these can be found in the campaign you setup for Google Ad Manager for that particular ad.
  3. Save the tag, we'll being adding a trigger later on. As a placeholder, you can have it fire on all pages for now.

Google-Ad-Conversion-Tag.png

 

Step 2: Configure your Trigger in GTM

  1. Create a "Custom Event" type trigger in your GTM container and give it a name.
  2. In the configuration, add in an Event name, for example: "ctaConvertedAssetName" (Note: it's important that this name is unique. The name will also be referenced in a later step in this article, so keep it handy).
  3. Save the trigger and attach it to the Tag you setup in Step 1.

 

Google-Ad-Conversion-Trigger.png

Step 3: Configure the Conversion Linker Tag 

Google suggests adding a Conversion Linker tag to fire on all pages. This is to ensure proper tracking in all browsers. You can find the instructions to set that up here.

 

Step 4: Add gtag.js to your Hub

In order for conversion tracking to work, you'll need the global site tag (gtag.js) added to every page of your Hub. To do so, add a code block in your Hub under Appearance > Custom Code. This code block will have the code placed in the <head>.

Once the code block is created, use the global site tag script from Google's developer documentation that can be found here.

Note

If you're already tracking page views through our built-in Google Analytics integration, or if you are tracking page views through your Google Tag Manager setup, please ensure that you add a parameter in your gtag.js setup to exclude pageview hits. You can find detailed instructions on how to do this in the Google documentation linked above.

 

Step 5: Pass Data Layer Variable Using Custom Code in your Hub

In Step 2, we created a trigger in GTM that is looking for a "Custom Event". This next piece of code we'll setup will pass this event name through the data layer and be picked up by your tag and trigger that you setup earlier.

  1. Create a custom code block in your Hub under Appearance > Custom Code
  2. Change the placement of the code block to be inserted in the "Body Bottom"
  3. Add the following code block template seen below:
<script>
 (function($,Hubs, undefined){ Hubs.Events.on('ctaFormSubmitSuccess',function(ctaId, ctaData, ctaName){
 if (ctaId == XXXXXX) {
 googleAdwords(ctaId, ctaData, ctaName);
 }
 }); function googleAdwords(ctaId, ctaData, ctaName){
 console.log(ctaId);
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event' : 'ctaConvertedAssetName'
 });
 }
 }(window.jQuery, window.Hubs));
 </script>

Once that code block is added, you need to swap out two components based on your needs:

  1. Where we see -- ctaId == XXXXXX -- you'll want to replace the X's with the 6 digit CTA ID that is being used to track conversions on
  2. Where we see -- 'ctaConvertedAssetName' -- you'll want to replace that with the name that you gave your "Custom Event" trigger in GTM in Step 2 of this article. (Note: the name must match exactly).
  3. Click "Save" on the code block and ensure that it is enabled

 

Additional Notes

In the above example from Step 5, we are targeting this code to only fire when a certain CTA is submitted. If you'd like, you can setup additional triggers to suit your needs.

For instance, if you'd like the conversion event to fire when a certain CTA is filled out BUT only on certain URLs, you can edit your tag in Step 1 to include a trigger that is looking for a certain URL path or hostname.

1 out of 1 found this helpful