Linking an external URL with an added tracking code in Ionic 2

Question

I want to have a unique http link to an external URL, extracted from my JSON data, from the detailed pages of my application.

I installed the inappbrowser plugin, which currently works with a static url going to apple.com. However, I want to use the product link URL from my JSON data. Here is the JSON data , this is the "aw_deep_link" that I want to use.

How can I link an external URL pulled out of an Angular expression using the Buy button on the details page and then add the Google Analytics tracking code to the end of the URL?

Here is the Google tracking code I want to add:

?utm_source=app&utm_medium=android

This is where Plunker works with a static URL on the detail pages.

DETAIL.TS

openUrl() {

        this.platform.ready().then(() => {
            let browser = new InAppBrowser("http://www.apple.com",'_blank');
            // let browser = new InAppBrowser("www.apple.com$?utm_source=app&utm_medium=android",'_blank');
            // let browser = new InAppBrowser("{data.aw_deep_link}",'_blank');


        });
}

DETAIL.HTML

<button (click)="openUrl()" ion-item>Buy Now</button>

Here is a similar concept used for Twitter pages in the Ionic Conference app.

https://github.com/driftyco/ionic-conference-app/blob/master/src/pages/speaker-list/speaker-list.html

Answer 1

You did not accept the url parameter in the openUrl function.

<button (click)="openUrl(data.aw_deep_link)" ion-item>Buy Now</button>

openUrl(url) {
    this.platform.ready().then(() => {
        let browser = new InAppBrowser(`${url}?utm_source=app&utm_medium=android`,'_blank');
        });
}