feat(Piwik): setCustomUrl missing the port info from the URL; se… (angulartics#368)

Author: shahmirn

Diff for: src/lib/providers/piwik/README.md

@@ -53,6 +53,22 @@ export class AppComponent {
 }
 ```
 
+Tracking Custom Variables
+```ts
+angulartics2.setUserProperties.next({index: 1, name: 'John', value: 123, scope: 'visit'});
+```
+Note: To track multiple custom variables, call setUserProperties multiple times
+
+Tracking Custom Dimensions
+```ts
+angulartics2.setUserProperties.next({
+    dimension1: 'v1.2.3',
+    dimension2: 'german',
+    dimension43: 'green',
+});
+```
+Note: Custom Variables and Custom Dimensions cannot be tracked in the same call, and requires separate setUserProperties calls
+
 To track full URLs if there is a hash (#), make sure to enable `settings=>websites=>settings=>page url fragments tracking` in the Piwik dashboard.
 
 Once set up, Angulartics [usage](https://github.com/angulartics/angulartics2#usage) is the same regardless of provider

Diff for: src/lib/providers/piwik/piwik.spec.ts

@@ -28,7 +28,7 @@ describe('Angulartics2Piwik', () => {
         fixture = createRoot(RootCmp);
         angulartics2.pageTrack.next({path: '/abc' });
         advance(fixture);
-        expect(_paq).toContain(['setCustomUrl', '/abc']);
+        expect(_paq).toContain(['setCustomUrl', window.location.origin + '/abc']);
       },
     )),
   );
@@ -199,12 +199,9 @@ describe('Angulartics2Piwik', () => {
     fakeAsync(inject([Angulartics2, Angulartics2Piwik],
       (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
         fixture = createRoot(RootCmp);
-        angulartics2.setUserProperties.next({userId: '1', firstName: 'John', lastName: 'Doe'});
+        angulartics2.setUserProperties.next({index: 1, name: 'John', value: 123, scope: 'visit'});
         advance(fixture);
-        expect(_paq).toContain([
-          'setCustomVariable',
-          { userId: '1', firstName: 'John', lastName: 'Doe' },
-        ]);
+        expect(_paq).toContain(['setCustomVariable', 1, 'John', 123, 'visit']);
       }
     )),
   );

Diff for: src/lib/providers/piwik/piwik.ts

@@ -28,8 +28,13 @@ export class Angulartics2Piwik {
 
   pageTrack(path: string, location?: any) {
     try {
+      if (!window.location.origin) {
+        (window.location as any).origin = window.location.protocol + '//'
+          + window.location.hostname
+          + (window.location.port ? ':' + window.location.port : '');
+      }
       _paq.push(['setDocumentTitle', window.document.title]);
-      _paq.push(['setCustomUrl', path]);
+      _paq.push(['setCustomUrl', window.location.origin + path]);
       _paq.push(['trackPageView']);
     } catch (e) {
       if (!(e instanceof ReferenceError)) {
@@ -229,7 +234,7 @@ export class Angulartics2Piwik {
     const dimensions = this.setCustomDimensions(properties);
     try {
       if (dimensions.length === 0) {
-        _paq.push(['setCustomVariable', properties]);
+        _paq.push(['setCustomVariable', properties.index, properties.name, properties.value, properties.scope]);
       }
     } catch (e) {
       if (!(e instanceof ReferenceError)) {