Skip navigation

Use Google Analytics with

10 min read
Download PDF

In this tutorial, you will learn how to quickly set up Google Analytics on your website and start tracking visitors and events.

Do you have any questions about integrating with Ask away.

Table of contents

    What is Google Analytics? 

    Google Analytics (GA) is a free Web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes. The service is available to anyone with a Google account.

    Google Analytics logo

    We recommend using Universal Analytics and Google Tag Manager as they are most suitable to connect data from multiple channels, such as mobile or IoT.

    This tutorial covers basic web scenarios. For logging of views and events from other channels, refer to the Google Analytics developer documentation.

    What is Google Tag Manager? 

    Google Tag Manager (GTM) is a free Tag Management System, which allows you to place simple static code into your web site and manage individual tags (pieces of tracking code) from the GTM admin interface.

    Integration with

    In this tutorial, you'll learn how to integrate Google Tag Manager into a web site to track its page views, and add a custom tracked event connected to a specific piece of content.

    You will:

    • Connect the web site with GA.
    • Track page views.
    • Add a custom conversion event to GTM.
    • Extend content with metadata for GA.
    • Provide the metadata to GTM on the web site.

    Now let's look at the steps in detail. As you will see, it follows a familiar process of integrating GA and GTM with just any site.

    Step 1: Connecting the web site with Google Analytics

    First, you need a GTM account. Visit Google Tag Manager and if you don’t have an account yet, create one.

    A screenshot of creating an account in Google Tag Manager

    Then navigate to the Admin tab, and select Install Google Tag Manager. This will show you the code to insert into your web site. If you are not a developer, ask your developer to insert the code for you.

    Installation of Google Tag Manager

    The Google Tag Manager code should be present on all pages where you want the tracking to be enabled.

    Step 2: Adding a tag for page views

    Google Tag Manager doesn't track anything by default. To start tracking page views, you need to add a tag for it.

    Create a new tag from either the Overview or Tags section of the account, with the following settings:

    • Tag name – Page view
    • Tag type – Google Analytics Universal Analytics
    • Track type – Page view
    • Google Analytics Settings – see below
    • Trigger – All pages
    A screenshot of configuration for a Google Tag Manager tag for Google Analytics.

    You need to connect the tag to your Google Analytics account. For that, you need to configure the Google Analytics Settings field within your tag. Create a new variable from that field with the following information:

    • Name – Google Analytics
    • Type – Google Analytics settings
    • Tracking ID – The Tracking ID of your Google Analytics account
    A screenshot of a Google Tag Manager variable for Google Analytics.

    You can find the Tracking ID in the Admin section of your Google Analytics account under Tracking info.

    A screenshot of where to find your Google Analytics Tracking ID.

    After you save the tag, you need to Submit the GTM version to apply the changes to the live tracking environment.

    Page views tracking finished – At this point, your page views should be tracked. When you visit the Real-Time report in Google Analytics and view pages on the web site, you should see the page views being tracked already.

    A screenshot of a Real-Time report in Google Analytics.

    Step 3: Register tag for the custom conversion event 

    The next step is to try custom tracking. This is a simple enough scenario that could be also achieved directly from GTM using click triggers. However, the outlined steps give you broader options with your future custom tracking which you can connect just anywhere (not every action is a click event). That is why we are showing an approach with a custom event in this tutorial.

    We will be interested in clicks on the contact address in the Sample app's Contact section, which now focuses the map to the specific address. That is the main action we expect the site visitors to perform on this page.

    Contact page in the Sample App.

    Navigate back to Google Tag Manager and create another tag with the following settings:

    • Tag name – Conversion
    • Tag type – Google Analytics Universal Analytics
    • Track type – Event
    • Category – Campaign
    • Action – Conversion
    • Value – See below
    • Google Analytics Settings – Google Analytics (the one you created earlier)
    • Trigger – See below

    Most of the values are up to you – they provide a better context within the Google Analytics report.

    A screenshot of configuration for a tag conversion in Google Tag Manager.

    To place the conversion name into the event, set the Value of the event. The most universal way is to get the Value from Data Layer (DL) data. A Data Layer is an object that contains all the information that you want to pass to Google Tag Manager.

    Create a new variable in the Value with the following information:

    • Variable name – DL Conversion
    • Variable type – Data Layer Variable
    • Data Layer Variable Name – Conversion
    A screenshot of Google Tag Manager configuration for a Data Layer variable.

    Using the variable will place {{DL Conversion}} into the Value of the tag.

    Similarly to page views, you need to specify a trigger for the tag. Add a new trigger with the following settings:

    • Trigger name – Conversion event
    • Trigger type – Custom event
    • Event name – conversion
    A screenshot of the configuration of a Google Tag Manager trigger.

    After you save the tag, the GTM part is ready. Now you need to call the custom event with the appropriate metadata from an action on your site.

    Make sure to submit the GTM changes again for the changes to take effect on your live website.

    Step 4: Extend Content type with conversion name

    In this step, you will extend a specific content type in with a conversion name for the newly created custom event in GTM.

    1. In, select from the app menu.
    2. Open the Cafe content type.
    3. Add a Text element.
      1. Title – Conversion name
      2. Guidelines – Text that explains to the editor what kind of conversion names you expect.
    4. Save the content type.
    Connecting a content type with a conversion

    How your content type might look after adding an element for a conversion.

    Now you need to add values to the element in existing items.

    1. In, select from the app menu.
    2. Filter the list by content type to only the Cafe type.
    3. Open a content item for editing.
    4. Fill in a conversion name for the item.
      Tip: To keep things simple, you can use just the name of the cafe or its geographic location (for example, "north_america"); it's up to you.
    5. Publish the content item to make sure the data is available on your live website.
    6. Repeat steps 3–5 for other Cafe items.
    How a Cafe content item might look after you've added a Conversion name

    How a Cafe content item might look after you've added a Conversion name.

    Use dedicated elements for metadata 

    You could use an existing element with the cafe name as a source for conversion name value, but we recommend having a dedicated element for the following reasons:

    • When someone edits the item name (for example, fixes a typo in it), your analytics data might be affected and inconsistent.
    • Having a dedicated element allows you to share the conversion value across multiple content items related to the conversion or campaign.
    • You can change the conversion name anytime, without influencing what site visitors see.

    Step 5: Fire custom conversion event on click 

    The Conversion tag in Google Tag Manager expects a custom event with the name conversion (with the appropriate metadata) to be fired.

    To do that, add the following code to the address onClick event in the Cafes page of the Sample App. If you're not a developer, ask a developer to do it for you.

    • JavaScript
    window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'conversion', 'conversion': cafe.conversion_name, });
    window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'conversion', 'conversion': cafe.conversion_name, });

    Note that the cafe.conversion_name is specific to the data model used in your application. Make sure that your data model is updated with the new element conversion_name (element codename generated from the element title), and that you use the correct property name in your code.

    If you're trying this on your own page, select whichever click handler you like and populate the conversion value with a value from your data model.

    Custom conversion tracking finished – At this point, your custom conversions should be tracked. When you visit the Real-Time report in Google Analytics and perform the click actions on your website, you should see the custom conversion events being tracked.

    A screenshot of a Real-Time report on events in Google Analytics.

    What's next?

    You learned how easy it is to connect Google Analytics and tracking configured through Google Tag Manager to your web site and how to track events with custom code and metadata.

    Google Tag Manager is a powerful tool which allows you to track many actions just by configuring it in its admin interface.

    Should you need more customized experience, use a custom tracking tool like what you have just learned to achieve virtually any tracking scenario.

    With the analytics working in your app:

    Do you have any questions about integrating with Ask away.