Installing Trackingplan

Installing Trackingplan

Installing Trackingplan

There are several ways you can install Trackingplan. All paths are simple and straightforward and can be completed in only a few minutes.

To choose your installation method, just pick the option that suits you best:

For Web:

As a CDP Destination:

For App:

☝🏻
Note: Depending on your business needs, installations for both web and app might be required.

Using Google Tag Manager

If you are using a Tag Manager, installing Trackingplan on your web can be done even without having access to your site’s code. Here is how:

  1. Log in to Google Tag Manager.
  2. Create a New tag inside the container connected to your website.
  3. Hover over the Tag Configuration box and click on the gray pencil icon.
  4. image
  5. Next, you can choose the tag type. Select Custom HTML Tag as the tag type.
  6. image
  7. Now, let’s configure your tag. To do this, paste your Trackingplan snippet into the HTML text box in Google Tag Manager. Remember that you can always retrieve your snippet from https://panel.trackingplan.com/plans/”your TP_ID”/install
  8. image
  9. Then, set up your tag’s advanced settings. Click Advanced Settings and set Tag firing Priority to 1000 and Tag Firing Options to Once per page to ensure Trackingplan can see events that trigger once the page has loaded.
  10. image
  11. Next, navigate to the Triggering box and click on the gray pencil icon to choose a trigger. For the best results, select All Pages.
  12. image
    image
  13. Once saved, Trackingplan will load on any page where the Google Tag Manager container script is installed. Remember to Submit your changes!
  14. image
    image

#GTM Tip: Track GTM Version and ID as a Custom Dimension

📌
Reminder: Any data tagged in your GTM can be added to the Trackingplan script using tags to extend Trackingplan's detection capabilities.

In this sense, to be able to later attribute warnings to configuration changes, show them as releases, and see them in RCA, we recommend you send GTM’s Container Version as tags.

The container version label is standard and can be included just as in the example below.

tags: {
...
"gtm_container_version": "{{Container Version}}"
...
}

Moreover, if you use multiple GTM containers, you can also add the Container ID as a tag. For it, you will need to configure it in GTM first, as indicated in this article.

Great! After this easy installation, don’t forget to verify that data collection is working to ensure Trackingplan is automatically monitoring and documenting all the customer data you are using for your analytics, marketing, and sales.

Add a Snippet to Your Site Code

To install Trackingplan by adding a snippet to your site code, please follow these steps:

  1. Retrieve your snippet from https://panel.trackingplan.com/plans/”your TP_ID”/install
  2. Paste the snippet into the top of the <head> section of all of your pages, before any tracking code.

Once installed and after verifying that data collection is working Trackingplan will automatically verify the data you send to your third-party services without modifying or slowing anything down. This will ensure your tracking plan is always updated and any inconsistencies or errors can be easily identified.

Note: If you are not using a content management system (CMS) like Webflow or WordPress, we recommend asking a developer to add the snippet to your pages. Incorrect installation will prevent Trackingplan from detecting relevant data.

As a Segment Destination

💡
Your Trackingplan’s Segment Webhook will be automatically generated here: https://panel.trackingplan.com/plans/TPXXXX/install. To access it, you’ll just need to add your TP_ID. If you don’t know it, please contact Trackingplan support.
image
📢
TLDR; You can also create a new Webhook destination and use the Trackingplan Segment Webhook URL as the Webhook URL.
  1. Log in to your Segment account and your workspace.
  2. On your Destinations page, click Add Destination.
  3. image
  4. Search for "webhooks" and click on the Webhooks Raw Data destination. Then, click on the Configure Webhooks Button.
  5. image
    image
  6. Pick the source you’d like to use with Trackingplan. If want to add more than one source, you can repeat this process. Then click Next.
  7. image
  8. Name your destination 'Trackingplan' (or the name you want to use to identify it). Then, select 'Fill in settings manually'. To finish this step, click Save.
  9. image
  10. Now we are going to add the webhook endpoint. To start, select Webhooks (max 5).
  11. image
  12. Next, paste your Segment Trackingplan Webhook URL into the Webhook URL field. Then, click Save.
  13. image
  14. To finish the installation process, enable your destination using the toggle.
  15. image

Now it’s time to verify that data collection is working and… that's it! Now all your Segment Events, Pages, and Identify Calls will be monitored and documented automatically within Trackingplan.

Installing Trackingplan in Amplitude CDP

💡
Your Trackingplan’s Webhook URL for Amplitude should look like https://eu-tracks.trackingplan.com/webhook/v1/YOUR_TPID?provider=amplitudewebhook. If you don’t know your TP_ID, please ask Trackingplan support.
📢
TL;DR: You need to create a new Webhook Destination in your Amplitude Data account and add your Trackingplan Endpoint as the URL. Make sure to enable filtering for all events.
  1. Login into your Amplitude Account and Go to the Data section of your dashboard:
  2. image
  3. Click on Connections → Destinations → Add Destinations
  4. image
  5. Select Webhook from the Catalog
  6. image
  7. Set a name to identify the connection (e.g: Trackingplan).
  8. image
  9. Add your Trackingplan Webhook URL, select All events at the events filter, and enable the Destination.
  10. image
  11. Click Save and confirm with Send Event & Save.
image

That’s it! Once you have it configured, your events will appear on your Trackingplan Dashboard within one hour. Just remember to verify that data collection is working by following these steps.

iOS SDK

The recommended way to install Trackingplan for iOS is to use Swift Package Manager, as it will simplify the process of installing and upgrading Trackingplan. To do this, follow the steps below.

If you prefer to install the Trackingplan SDK with Cocoapods, click here.

  1. In Xcode, add the Trackingplan dependency by navigating to File -> Swift Packages -> Add Package Dependency...
  2. image
  3. If you’re asked to choose a project, select the project you want to add Trackingplan to. If not, proceed to step 3.
  4. image
  5. Choose a package repository. To choose Trackingplan’s repository, copy and paste https://github.com/trackingplan/trackingplan-ios into the search box and click Next.
  6. image
  7. Choose Version in the Rules section. The latest version of Trackingplan will auto-populate by default. Click Next.
    • To install previous versions of Trackingplan, you can manually complete this field with the appropriate version information.
    • image
  8. Check the box next to Trackingplan and click Finish.
  9. image
  10. Verify that the Trackingplan library has been added to the Swift Package Dependencies section.
  11. image
  12. In your application delegate’s - application(_:didFinishLaunchingWithOptions:) method, set up the SDK like so:
  13. //
    //  AppDelegate.swift
    //  ...
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            // Override point for customization after application launch.
            
            // Initialize Trackingplan SDK
            TrackingPlan.initialize(tpId: "#YourTrackingplanId")
            
            return true
    }
  14. Import the SDK with the following command:
  15. //
    //  AppDelegate.swift
    //  ...
    
    import TrackingPlan

All set! You have successfully installed the Trackingplan iOS SDK. Please verify that data collection is working to ensure Trackingplan is automatically monitoring and documenting all the customer data you are using for your analytics, marketing, and sales.

Installing iOS SDK with Cocoapods

Trackingplan also supports iOS installation using Cocoapods. To install Trackingplan with Cocoapods, complete the following steps.

  1. Add the Trackingplan dependency to your Podfile using the following code:
  2. pod 'Trackingplan', :git => 'https://github.com/trackingplan/trackingplan-ios.git'
  3. In your application delegate’s - application(_:didFinishLaunchingWithOptions:) method, set up the SDK like so:
  4. //
    //  AppDelegate.swift
    //  ...
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            // Override point for customization after application launch.
            
            // Initialize Trackingplan SDK
            TrackingPlan.initialize(tpId: "#YourTrackingplanId")
            
            return true
    }
  5. Import the SDK with this command:
  6. //
    //  AppDelegate.swift
    //  ...
    
    import TrackingPlan

And that’s it! After completing these steps and verifying that data collection is working, you have finished installing Trackingplan’s SDK.

Install iOS SDK in a Flutter project

TrackingPlan iOS platform dependency can be managed using Cocoapods (https://guides.cocoapods.org/using/getting-started.html#getting-started)

Your Flutter project is not using cocoapods yet?

  • Move to the ios folder inside your flutter project folder. {project_name}/ios/
  • Initialise cocoapods: $ pod init : this will create the Podfile.

Install:

  • Open the Podfile, uncomment and set the platform and version at the top.
    • platform :ios, '13.0.0'
  • Add line for the Trackingplan pod inside the target block:
    • pod 'Trackingplan', :git => 'https://github.com/trackingplan/trackingplan-ios.git'
  • Make sure that use_frameworks! is in place to disable dynamic frameworks

Sample Podfile (Project without Cocoapods):

platform :ios, '13.0.0'

...

target 'Runner' do
  use_frameworks!
    # Pods for Runner
  pod 'Trackingplan', :git => 'https://github.com/trackingplan/trackingplan-ios.git'
end
  • Move to the ios folder path {project_name}/ios/ and run the command $ pod install

Sample Podfile(Project already using Cocoapods):

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  pod 'Trackingplan', :git => 'https://github.com/trackingplan/trackingplan-ios.git'
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

Setup:

  • Include Pods files in debug and release config:
    • Edit the file {project_name}/ios/Flutter/Debug.xcconfig and add at the end:
    • #include "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig”

    • Edit the file {project_name}/ios/Flutter/Release.xcconfig and add at the end:
    • #include "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig" #include "Pods/Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"

  • Update AppDelegate.swift in {project_name}/ios/Runner/
    • Import tracking plan at the top
    • image
    • Initialise tracking plan with the identifier provided inside the didFinishLaunchingWithOptions

Android SDK

The recommended way to install Trackingplan for Android is to use Android Studio.

Note: Before starting the installation process, make sure your project targets API level 21 (Lollipop) or later.

To install Trackingplan in Android Studio, complete the following steps:

  1. Add the Trackingplan dependency. To do this, expand the Gradle Scripts section.
  2. image
  3. Then, select the project-level build.gradle file and add com.trackingplan.client:adapter:1.1.2 as a classpath dependency to the dependencies section:
  4. dependencies {   
        // ...
        classpath "com.trackingplan.client:adapter:1.1.2"
        // ...
    }
  5. After that, select the module-level build.gradle file and modify it as indicated below:
    • Add id 'com.trackingplan.client' to the plugins section.
    • plugins {
          // ...
          id 'com.trackingplan.client'
          // ...
      }
    • Add implementation 'com.trackingplan.client:sdk:1.1.2' to the dependencies section.
    • dependencies {
          // ...
          implementation 'com.trackingplan.client:sdk:1.1.2'
          // ...
      }
  6. In the onCreate method of your Application's Main Activity, set up the SDK like so:
  7. Trackingplan.init("YOUR TRACKINGPLAN ID GOES HERE").start(this)
  8. Then import the SDK with the following command:
  9. import com.trackingplan.client.sdk.Trackingplan;

You have now successfully installed the Trackingplan Android SDK.

Build from Source Code

To build Trackingplan’s SDK from source code, clone this repository to a local directory in your machine: https://github.com/trackingplan/trackingplan-android.

After that, open a terminal in that directory and run:

$ ./gradlew cleanBuildLocalPublish

To use this custom build, modify your project-level build.gradle file as indicated below:

buildscript {
    repositories {
        // ...
        mavenLocal() // <-- Add maven local
    }

}

allprojects {
    repositories {
        // ...
        mavenLocal() // <-- Add maven local
    }
}

Remember to change the version of Trackingplan in your dependencies to 1.0.0-SNAPSHOT.

Install Android SDK in a Flutter project

To add Trackingplan to your flutter app, find the android directory inside your flutter project and add the Trackingplan dependency like so:

  • Add com.trackingplan.client:adapter:1.3.0 as a classpath dependency to the dependencies section of the android/build.gradle file.
dependencies {   
    // ...
    classpath "com.trackingplan.client:adapter:1.3.0"
    // ...
}
  • Add implementation 'com.trackingplan.client:sdk:1.3.0' to the dependencies section of the android/app/build.gradle file.
dependencies {
    // ...
    implementation 'com.trackingplan.client:sdk:1.3.0'// ...
}
  • Apply com.trackingplan.client plugin in your android/app/build.gradle file.
apply plugin: 'com.android.application'
apply plugin: 'com.trackingplan.client' // <-- Trackingplan Plugin

Finally, find the MainActivity class (android/app/src/main/kotlin) and, in the onCreate method, set up the SDK like so:

Trackingplan.init("YOUR_TP_ID").start(this)

And of course, import the SDK:

import com.trackingplan.client.sdk.Trackingplan;

All set!

For further information, please check https://github.com/trackingplan/trackingplan-android.

Advanced Options

Trackingplan for Android supports the same Advanced Options as Trackingplan for Web.

For instance, to set a source alias and turn on debug mode, use the following script:

Trackingplan.init("YOUR TRACKINGPLAN ID GOES HERE")
    .sourceAlias("Android app")
    .enableDebug()
    .start(this)

Additionally, there is a dryRun option available that lets you test Trackingplan for Android without actually sending any data to Trackingplan.

Content Security Policies

Content Security Policies are delivered as a header to your users' browsers by your web server and are used to declare which dynamic resources are allowed to load on your page.

For many websites, this is often as straightforward as declaring that only scripts/styles from your own domain and the tools you use are allowed. However, this can become more intricate when complex setups are in play.

If you identify CSP errors on your site, there is currently no workaround and you will need to work with your development team or hosting provider to adjust your CSP settings.

Step 1. Check to see if there are CSP errors.

You can check your browser network tab console by following the steps in this guide.

If there is a Content Security Policy issue, you will see something similar to the below error:

image

Step 2. Consult with your web developer or hosting provider to adjust CSP settings.

Since all servers are different, Trackingplan Support won't be able to help troubleshoot any issues with this process. When making changes to your Content Security Policies, the best person to reach out to is your web developer, or whoever manages your website.

Step 3. Choose which CSP settings to adjust.

If you are using a default CSP then adding the below to your default-src rules will be sufficient.

The "..." in the examples below is a placeholder for any existing rules you might have in place:

default-src ... *.trackingplan.com 'unsafe-inline'

If you want stricter restrictions, we recommend the template below to ensure your policies are more future-proof as we expand our services. Here's an example of what that would look like:

connect-src ... *.trackingplan.com 

If your CSPs require more granularity, these are the absolute minimum security allowances you need to add to your web server to allow Trackingplan to function properly on your site:

connect-src ... https://config.trackingplan.com https://api.trackingplan.com

Verify Trackingplan is collecting data

Once you have installed Trackingplan in any of the ways presented in this document, you can visit the Installation Page to check that Trackingplan is up and running on your platform.

image

If everything is all right, this message will be displayed:

image
📢
For new installations, this process can take up to one hour. Please, contact us if you don’t see the previous message after that period of time. In case you see it, now it’s Trackingplan's turn to automatically discover and document all the traffic you’re sending to all your integrations. We will send you a message when we have collected enough data.

My tracking plan is ready. Now what?

Hurray! Your Trackingplan is now ready. Have a look at the documentation below to continue squeezing the value of your data to the max:

  • Do a tour through your Dashboard here.
  • Configure your settings to customize your tracking plan here.
  • Share your plan and align with and across other members of your organization here.

← Previous

Overview
Overview

Next →

Settings
Settings