Home » Javascript » How to track iFrame url with Google Analytics in Angular 5?

How to track iFrame url with Google Analytics in Angular 5?

Posted by: admin October 29, 2018 Leave a comment


I’m trying to track iFrame endpoints for usage in Google Analytics in Angular 5. Currently there are reports that are retrieved from an API, however the endpoints for the specific report isn’t being tracked by GA. Currently only the reports URL is being tracked and not the specific report within the report endpoint.

Here is an example from the console:

  Clearing displayed errors due to: Route change NavigationStart(id: 1, url: '/insights/reports/leads')
google-analytics.service.ts?a21b:45 route changed to /insights/reports/leads
google-analytics.service.ts?a21b:46 tracking url /insights/reports

As you can see, the route is changed to insights/reports/leads however GA is only tracking insights/reports.

Here is the google analytics service file:

import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot, RoutesRecognized, NavigationEnd } from '@angular/router';

import { Configuration } from 'configuration';
import { ga } from 'google-analytics';
import {AuthLocal} from '../../auth/auth.local';

export class GoogleAnalyticsService {

        private _router: Router,
        private _authLocal: AuthLocal,
    ) {

    public initialize() {
        if (Configuration.GoogleAnalytics && Configuration.GoogleAnalytics.enabled) {

            ga('create', Configuration.GoogleAnalytics.trackingId, 'auto');


    public setUserId() {

        ga('set', 'userId', this._authLocal.getID()); // Set the user ID using signed-in user_id.

    private observeRouteChanges() {
        let mostRecentRoute: ActivatedRouteSnapshot;
            .do((evt) => {
                // keep track of the most recent route that was matched by the router.
                if (evt instanceof RoutesRecognized) {
                    mostRecentRoute = evt.state.root;
            .filter((evt) => {
                return evt instanceof NavigationEnd;
            .subscribe((evt: NavigationEnd) => {
                let url = this.routeTreeToTrackingUrl(mostRecentRoute);
                console.log(`route changed to ${evt.urlAfterRedirects}`);
                console.log(`tracking url ${url}`);
                ga('set', 'page', url);
                ga('send', 'pageview', url);

        Builds a tracking url for the given route tree. Since route parameters are included in
        the path portion of the url and not in hashtag or query params, we need to strip the
        parameters out in order to build a proper tracking url. For example the route may be
        /packages/123/sites/456/pages/789 but what we want to track is /packages/sites/pages.
    private routeTreeToTrackingUrl(routeTree: ActivatedRouteSnapshot) {
        let fullRoute = '';

        // traverse the tree to build a full route path such as /packages/:packageId/sites/:siteId
        let current: ActivatedRouteSnapshot = routeTree;
        while ((current = current.firstChild) !== null) {
            if (current.routeConfig && current.routeConfig.path) {
                fullRoute += '/' + current.routeConfig.path;

        // strip out any route paramters
        let trackingUrl = fullRoute.split('/')
            .filter(fragment => !fragment.startsWith(':'))

        return trackingUrl || '/';

And also the html:

div class="overlay" [routerLink]="['/insights/reports/leads']">
                    <div class="insights-title">Leads</div>
                    <div class="insights-description">
                        List of leads between a date range with ability to filter by accepted/unaccepted and dealer.

Ultimately given this code, how do I append the iFrame for the specific report to the URL that is being tracked?