### Google Tag Manager Initialization
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
Initializes Google Tag Manager (GTM) by asynchronously loading the GTM script. This snippet is crucial for integrating website analytics and marketing tags.
```javascript
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MB86DR5');
```
--------------------------------
### Trackingplan Installation FAQ
Source: https://www.trackingplan.com/faqs/how-to-install-trackingplan
Provides an answer to a frequently asked question about installing Trackingplan. It briefly explains the ease of installation and its purpose in monitoring digital analytics.
```apidoc
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "How to install Trackingplan? | Trackingplan",
"acceptedAnswer": {
"@type": "Answer",
"text": "Easily install Trackingplan on your website or app with our step-by-step guide. Ensure seamless setup and start monitoring your digital analytics today."
}
}
}
```
--------------------------------
### Trackingplan Snippet for Websites (Direct Code)
Source: https://www.trackingplan.com/faqs/how-to-install-trackingplan
Instructions for installing the Trackingplan snippet by directly pasting it into the top of the `` section of all web pages, before any other tracking code.
```html
```
--------------------------------
### Schema.org FAQPage Structured Data
Source: https://www.trackingplan.com/faqs/is-there-any-free-trial
Provides Schema.org JSON-LD markup for an FAQ page. It defines a question about a free trial and an answer detailing how to get started with Trackingplan's free trial.
```json
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "Is there any free trial? | Trackingplan",
"acceptedAnswer": {
"@type": "Answer",
"text": "Get details on Trackingplan's free trial and see how you can start monitoring your analytics for free, with no strings attached."
}
}
}
```
--------------------------------
### Trackingplan Snippet for Websites (Google Tag Manager)
Source: https://www.trackingplan.com/faqs/how-to-install-trackingplan
Instructions for installing the Trackingplan snippet via Google Tag Manager. Requires pasting the provided HTML snippet into a Custom HTML Tag, setting firing priority to 1000, and firing options to 'Once per page'. Recommended trigger is 'All Pages'.
```html
```
--------------------------------
### Guide Link - Advanced Trackingplan
Source: https://www.trackingplan.com/authors-guides/rafael-campoamor
HTML structure for a link to a guide titled 'Advanced Use of Trackingplan in Dynamic Tagging'. It includes placeholder elements and a 'Learn more' button.
```html
[
](/guides/advanced-trackingplan-dynamic-tagging)[
Server-Side Tagging
](/about/server-side-tagging)
Rafael Campoamor
[
Advanced Use of Trackingplan in Dynamic Tagging
-----------------------------------------------
](/guides/advanced-trackingplan-dynamic-tagging)[
Learn more
](/guides/advanced-trackingplan-dynamic-tagging)
```
--------------------------------
### Trackingplan Public API Documentation
Source: https://www.trackingplan.com/faqs/how-to-install-trackingplan
Documentation for the Trackingplan Public API, covering endpoints, methods, and data structures for integrating with Trackingplan services.
```APIDOC
Trackingplan Public API:
Base URL: https://www.trackingplan.com/docs/trackingplan-public-api
Endpoints:
- /plans: Manage tracking plans.
- /integrations: Manage integrations.
- /health-summary: Retrieve health summary for a website.
Example Usage (Conceptual):
GET /health-summary?website=webflow.com&environment=PRODUCTION
Response:
{
"website": "webflow.com",
"environment": "PRODUCTION",
"status": "Healthy",
"issues": [
{
"type": "TrackingBreakdown",
"details": "Google Analytics tag not firing correctly."
}
]
}
Authentication:
API keys or OAuth tokens are typically required. Refer to specific endpoint documentation for details.
Rate Limiting:
Standard API rate limits apply. Consult the API documentation for specific limits.
Related Resources:
- Documentation: https://www.trackingplan.com/docs/
- UTM Builder Tool: /utm-builder-tool
- Regex tester: /regex-tester
```
--------------------------------
### Salesintelligence Integration Example
Source: https://www.trackingplan.com/integrations/salesintelligence
HTML structure for linking to marketing automation integrations and displaying an image.
```html
[
Marketing Automation
](/integrate-with/marketing-automation-tools)
[Start Free Trial](https://panel.trackingplan.com/signup)[Book a Demo](https://app.timetime.in/b/f61ca7f2-40b7-49d9-9b6e-dbe8ccadf928)
```
--------------------------------
### Update Social Share Links
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Dynamically updates the 'href' attributes for Twitter and LinkedIn share buttons using the current page URL.
```javascript
const url = window.location.href;
let twitterButton = document.getElementById('Twitter-Icon');
twitterButton.setAttribute('href', 'https://twitter.com/intent/tweet?=&url='+url);
let linkedinButton = document.getElementById('Linkedin-Icon');
linkedinButton.setAttribute('href', 'https://www.linkedin.com/sharing/share-offsite/?url='+url);
```
--------------------------------
### Load Google Fonts
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
Loads specified Google Fonts asynchronously for web pages. This snippet ensures that custom fonts are available for styling elements.
```javascript
WebFont.load({
google: {
families: ["Droid Sans:400,700"]
}
});
```
--------------------------------
### HTML Event Attributes
Source: https://www.trackingplan.com/blog/event-tracking-the-definitive-guide
Examples of common HTML event attributes used to trigger JavaScript functions or browser actions in response to user interactions or page events.
```html
onchange: An HTML element has been changed
onclick: The user clicks an HTML element
onmouseover: The user moves the mouse over an HTML element
onmouseout: The user moves the mouse away from an HTML element
onkeydown: The user pushes a keyboard key
onload: The browser has finished loading the page
```
--------------------------------
### General CSS Styling and Utility
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Contains various CSS rules for general page styling, including font smoothing, selection highlighting, and responsive design adjustments for mobile navigation and login buttons. It also includes a commented-out section for an underline animation effect.
```css
*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; };
```
```css
::selection { color: #132840; background: #46D8A0; }
```
```css
.navbar-mobile-wrap { height: calc(100vh); height: calc(var(--vh, 1vh) * 100); }
```
```css
.use-cases-mobile-submenu { height: calc(100vh); height: calc(var(--vh, 1vh) * 100); }
```
```css
.integrations-mobile-submenu { height: calc(100vh); height: calc(var(--vh, 1vh) * 100); }
```
```css
@media only screen and (max-width: 1148px) { #login-button, .login-button { display:none; } }
```
```css
/* Underline Animation */
/* Initial state: no underline */
/*[data-undermola="true"] { display: inline-block; position: relative; }*/
/*[data-undermola="true"]:after { content: ''; position: absolute; width: 102%; margin-left: -1%; transform: scaleX(0); height: 4px; bottom: 0; left: 0; background-color: var(--our-green); transform-origin: bottom right; transition: transform 2s ease-in-out 0.75s; clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%); }*/
/*.undermola-animate:after { transform: scaleX(1); transform-origin: bottom left; }*/
```
```css
[data-undermola="true"] { display: inline; /* Ensure it works with inline text */ backgroun
```
--------------------------------
### Schema.org FAQPage Markup
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Structured data markup using Schema.org's FAQPage type. It defines a question and its accepted answer, intended for search engine optimization to display rich results for frequently asked questions.
```APIDOC
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "How do I get started? | Trackingplan",
"acceptedAnswer": {
"@type": "Answer",
"text": "Learn how to set up Trackingplan step by step. Install the snippet, access your dashboard, and start monitoring your analytics data effortlessly."
}
}
}
```
--------------------------------
### Webflow JS/Touch Class Initialization
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
Initializes Webflow's JavaScript and touch detection classes on the document element. This is a common pattern for enabling responsive design features and touch interactions.
```javascript
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);
```
--------------------------------
### Trackingplan Public API Documentation
Source: https://www.trackingplan.com/categories-faqs/installing-trackingplan
Access the comprehensive documentation for the Trackingplan Public API. This API allows developers to programmatically interact with Trackingplan services, manage tracking data, and integrate with other systems.
```APIDOC
Trackingplan Public API Documentation:
This documentation outlines the available endpoints, request methods, parameters, and response formats for interacting with the Trackingplan platform via its public API.
Key Features:
- Data Retrieval: Access tracking data, health summaries, and configuration details.
- Management Operations: Potentially manage tracking plans, environments, or alerts (specifics depend on API scope).
- Integration: Facilitate integration with CI/CD pipelines, analytics dashboards, or custom reporting tools.
Example Use Cases:
- Automating the validation of tracking implementation across different environments.
- Building custom dashboards that pull data directly from Trackingplan.
- Triggering alerts or actions based on tracking health status reported by the API.
Refer to the official Trackingplan API documentation for detailed endpoint specifications, authentication methods, and usage examples.
```
--------------------------------
### Underline Animation CSS
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
CSS for creating an underline animation effect on elements. It defines the initial state with no underline and the active state with an animated underline using CSS transitions and pseudo-elements.
```css
/* Underline Animation */
/* Initial state: no underline */
/*[data-undermola="true"] {
display: inline-block;
position: relative;
}
[data-undermola="true"]:after {
content: '';
position: absolute;
width: 102%;
margin-left: -1%;
transform: scaleX(0);
height: 4px;
bottom: 0;
left: 0;
background-color: var(--our-green);
transform-origin: bottom right;
transition: transform 2s ease-in-out 0.75s;
clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
}
.undermola-animate:after {
transform: scaleX(1);
transform-origin: bottom left;
}
*/
[data-undermola="true"] {
display: inline;
/* Ensure it works with inline text */
}
```
--------------------------------
### Initialize Social Sharing Links
Source: https://www.trackingplan.com/faqs/what-is-a-tracking-plan
Sets up sharing links for Facebook, Twitter, and LinkedIn by dynamically appending the current URL and page title to their respective share URLs. Ensures links open in new tabs.
```javascript
$(document).ready(function () {
let title = document.title;
let url = window.location.href;
$('\\[data-share-facebook\\]').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + url + '%2F&title=' + title + '%3F');
$('\\[data-share-facebook\\]').attr('target', '\'_blank\');
$('\\[data-share-twitter\\]').attr('href', 'https://twitter.com/share?url=' + url + '%2F&title=' + title + '&summary=');
$('\\[data-share-twitter\\]').attr('target', '\'_blank\');
$('\\[data-share-linkedin\\]').attr('href', 'https://www.linkedin.com/shareArticle?mini=true&url=' + url + '%2F&title=' + title + '&summary=');
$('\\[data-share-linkedin\\]').attr('target', '\'_blank\');
});
```
--------------------------------
### CSS Animated Underline
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This CSS snippet defines styles for creating an animated underline effect on elements. It uses linear gradients and transitions to achieve a smooth animation when applied to an element, typically on hover or focus.
```CSS
/* CSS for animated underline */
/* Assuming this is part of a larger CSS file or style block */
/* The specific selector is not provided in the input, but the properties are */
background-image: linear-gradient(to right, var(--our-green) 0%, var(--our-green) 100%);
background-position: 0 90%; /* Position the underline at the bottom */
background-size: 0 max(0.1em, 3px); /* Initially, make the width 0 to animate it */
background-repeat: no-repeat;
transition: background-size 2s ease-in-out 1s; /* Smooth animation */
/* Class to trigger the animation */
.undermola-animate {
background-size: 100% max(0.1em, 3px); /* Animate from 0 to full width */
}
```
--------------------------------
### Google Tag Manager Initialization
Source: https://www.trackingplan.com/categories-faqs/installing-trackingplan
Initializes Google Tag Manager (GTM) by pushing a 'gtm.js' event and asynchronously loading the GTM script. This is crucial for integrating analytics and marketing tags.
```javascript
(function(w,d,s,l,i){
w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),
dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MB86DR5');
```
--------------------------------
### Setup Social Sharing Links
Source: https://www.trackingplan.com/faqs/how-can-i-create-a-customer-data-tracking-plan
This JavaScript code snippet dynamically sets the 'href' attribute for Twitter and LinkedIn share buttons using the current page's URL. It ensures that sharing functionality correctly points to the page being viewed.
```javascript
const url = window.location.href; let twitterButton = document.getElementById('Twitter-Icon'); twitterButton.setAttribute('href', 'https://twitter.com/intent/tweet?=&url='+url); let linkedinButton = document.getElementById('Linkedin-Icon'); linkedinButton.setAttribute('href', 'https://www.linkedin.com/sharing/share-offsite/?url='+url);
```
--------------------------------
### Trackingplan UTM Builder Tool
Source: https://www.trackingplan.com/categories-faqs/installing-trackingplan
Use the Trackingplan UTM Builder tool to easily construct and manage UTM parameters for marketing campaigns. This helps ensure consistent and accurate tracking of campaign performance.
```TOOL
Trackingplan UTM Builder Tool:
Purpose:
Simplifies the creation of UTM (Urchin Tracking Module) parameters for marketing URLs.
Functionality:
- Fields for campaign source, medium, name, term, and content.
- Generates a complete UTM-tagged URL.
- May offer options for URL encoding or shortener integration.
Use Cases:
- Creating consistent UTM tags for email campaigns, social media posts, and paid advertisements.
- Ensuring all team members use the same UTM parameter structure.
- Tracking the effectiveness of different marketing channels and campaigns.
```
--------------------------------
### Social Sharing Link Generation (jQuery)
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This snippet initializes social sharing links for Facebook, Twitter, and LinkedIn when the document is ready. It dynamically populates the `href` attributes with the current page URL and title, ensuring proper formatting for each platform.
```javascript
$(document).ready(function () {
let title = document.title;
let url = window.location.href;
$('\\[data-share-facebook]').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + url + '%2F&title=' + title + '%3F');
$('\\[data-share-facebook]').attr('target', '\'_blank');
$('\\[data-share-twitter]').attr('href', 'https://twitter.com/share?url=' + url + '%2F&title=' + title + '&summary=');
$('\\[data-share-twitter]').attr('target', '\'_blank');
$('\\[data-share-linkedin]').attr('href', 'https://www.linkedin.com/shareArticle?mini=true&url=' + url + '%2F&title=' + title + '&summary=');
$('\\[data-share-linkedin]').attr('target', '\'_blank');
});
```
--------------------------------
### Initialize Google Tag Manager
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
This JavaScript code snippet initializes Google Tag Manager (GTM) by dynamically creating a script tag and appending it to the document's head. It ensures that GTM tracking is active for analytics and marketing purposes.
```javascript
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-MB86DR5');
```
--------------------------------
### Dynamic Callback Execution
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This event listener attaches to the document's click events. If a clicked element has a `data-callback` attribute, it attempts to execute the JavaScript function named by that attribute, passing the element itself as an argument. It includes error handling for missing functions.
```javascript
document.addEventListener("click", (event) => {
if(event.target?.dataset?.callback){
try {
window[event.target.dataset.callback](event.target);
} catch (e){
console.log("callback function not found", event.target.dataset.callback);
}
}
});
```
--------------------------------
### JSON-LD Breadcrumb Schema
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Schema.org markup in JSON-LD format representing a breadcrumb trail for a webpage. It outlines the hierarchical navigation path, including Home, FAQs, and specific article pages.
```json
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.trackingplan.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "FAQs",
"item": "https://www.trackingplan.com/faqs"
},
{
"@type": "ListItem",
"position": 3,
"name": "Getting started with Trackingplan",
"item": "https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan "
},
{
"@type": "ListItem",
"position": 4,
"name": "How do I get started? | Trackingplan"
}
]
}
```
--------------------------------
### LinkedIn Conversion Tracking
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
Provides functions to track specific conversion events for LinkedIn Insight Tag. `linkedinSignup` tracks a signup conversion (ID 7271073), and `linkedinBook` tracks a booking conversion (ID 7271137). These functions are typically called on user actions.
```javascript
function linkedinSignup(){
console.log("CONVERSION SIGNUP");
window.lintrk('track', { conversion_id: 7271073 });
}
function linkedinBook(){
console.log("CONVERSION BOOK");
window.lintrk('track', { conversion_id: 7271137 });
}
```
--------------------------------
### CSS for Scroll-Based Navbar Styling
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
These CSS rules define the appearance of the navbar when it is in its default state (`[js="navbar-not-scrolled"]`) and when it has been scrolled (`[js="navbar"].scrolled`). They control background color, border, and box-shadow properties to visually indicate the scrolled state.
```css
\[js="navbar-not-scrolled"\] {
background: white;
border-bottom: 0px solid #C7CFDB;
box-shadow: gray 1px -8px 10px;
}
\[js="navbar"\]\.scrolled {
background: white;
border-bottom: 0px solid #C7CFDB;
box-shadow: gray 1px -8px 10px;
}
```
--------------------------------
### Dynamic Callback Execution on Click
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Listens for click events on the document and executes a JavaScript function specified by the `data-callback` attribute on the clicked element. Includes error handling for missing functions.
```javascript
document.addEventListener("click", (event) => {
if(event.target?.dataset?.callback){
try {
window[event.target.dataset.callback](event.target);
} catch (e){
console.log("callback function not found", event.target.dataset.callback);
}
}
});
```
--------------------------------
### Scroll-Based Navbar Styling
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This functionality applies a 'scrolled' class to a navbar element (`#navbar-container` or `[js='navbar']`) when the user scrolls past its height. It uses `requestAnimationFrame` for performance optimization when checking scroll position. It also includes logic to apply the class on initial load if already scrolled.
```javascript
/*$(function () {
let raf;
const doc = $(document);
const navbar = $('#navbar-container');
const checkNavbarScroll = () => {
navbar.toggleClass('scrolled', doc.scrollTop() > navbar.height());
};
doc.scroll(() => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(checkNavbarScroll);
});
checkNavbarScroll();
});*/
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
window.addEventListener('load', function () {
// Detectar si está en Safari
var devicewidth = jQuery(window).width();
let userAgentString = navigator.userAgent;
let chromeAgent = userAgentString.indexOf("Chrome") > -1;
let safariAgent = userAgentString.indexOf("Safari") > -1;
if ((chromeAgent) && (safariAgent)) safariAgent = false;
if(safariAgent) {
jQuery("body").addClass("safari");
}
// Cambiar el color del menú al hacer scroll
$(function () {
var $nav = $("\\[js='navbar']");
$(document).scroll(function () {
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
if($(window).scrollTop() > 10){
$nav.toggleClass('scrolled');
};
});
});
```
--------------------------------
### Intersection Observer for Element Animation
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This function sets up an Intersection Observer to watch for elements with the attribute `data-undermola="true"`. When an element enters the viewport, it adds the class `undermola-animate` to it and stops observing that element. This is used for triggering animations on scroll. Includes basic error handling.
```javascript
function observeUndermola() {
try {
const elements = document.querySelectorAll('\\[data-undermola="true"\]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('undermola-animate');
observer.unobserve(entry.target);
}
});
});
elements.forEach(element => {
observer.observe(element);
});
} catch (e){}
}
document.addEventListener('DOMContentLoaded', observeUndermola);
```
--------------------------------
### Trackingplan Public API Reference
Source: https://www.trackingplan.com/about/adobe-analytics
Access the Trackingplan Public API for programmatic interaction with the platform. This API allows developers to integrate Trackingplan's data and functionalities into their own applications and workflows. Refer to the official documentation for detailed endpoint descriptions, authentication methods, request/response formats, and usage examples.
```APIDOC
Trackingplan Public API
Endpoint: https://www.trackingplan.com/docs/trackingplan-public-api
Description: The Trackingplan Public API provides access to various features and data within the Trackingplan platform. It is designed for developers to integrate with Trackingplan's services, enabling automated data retrieval, analysis, and management.
Key Features:
- Data Retrieval: Access tracking data, audit results, and configuration details.
- Workflow Integration: Automate tasks and integrate with CI/CD pipelines.
- Reporting: Programmatically generate reports and insights.
Authentication:
- API Key based authentication is typically required. Consult the official documentation for details on obtaining and using API keys.
Common Operations (Illustrative - refer to official docs for specifics):
1. **List Projects**
* Method: GET
* Path: /projects
* Description: Retrieves a list of all projects associated with the authenticated account.
* Parameters:
* `api_key` (string, required): Your Trackingplan API key.
* Returns:
* An array of project objects, each containing project ID, name, and status.
2. **Get Project Details**
* Method: GET
* Path: /projects/{projectId}
* Description: Retrieves detailed information for a specific project.
* Parameters:
* `projectId` (string, required): The unique identifier of the project.
* `api_key` (string, required): Your Trackingplan API key.
* Returns:
* A detailed project object.
3. **List Audits for Project**
* Method: GET
* Path: /projects/{projectId}/audits
* Description: Retrieves a list of all audits performed for a given project.
* Parameters:
* `projectId` (string, required): The unique identifier of the project.
* `api_key` (string, required): Your Trackingplan API key.
* `limit` (integer, optional): Maximum number of audits to return.
* `offset` (integer, optional): Number of audits to skip.
* Returns:
* An array of audit objects, including audit ID, timestamp, and status.
4. **Get Audit Results**
* Method: GET
* Path: /audits/{auditId}/results
* Description: Retrieves the detailed results of a specific audit.
* Parameters:
* `auditId` (string, required): The unique identifier of the audit.
* `api_key` (string, required): Your Trackingplan API key.
* Returns:
* An object containing audit findings, errors, and compliance status.
Error Handling:
- Standard HTTP status codes (e.g., 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Internal Server Error).
- Error responses typically include a JSON body with an error message and code.
Further Information:
- For the most up-to-date information, including specific endpoints, request bodies, response schemas, and authentication details, please visit the official Trackingplan Public API documentation at: https://www.trackingplan.com/docs/trackingplan-public-api
```
--------------------------------
### Webflow Tab Activation via URL Parameter
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Webflow-specific script that reads a 'tab' parameter from the URL and triggers a click event on the corresponding tab element to activate it. Includes a helper function to parse URL parameters.
```javascript
var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (!tabName) return;
$('.' + tabName).triggerHandler('click');
function getParam(name) {
name = name.replace(/[\[\]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
var results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
});
```
--------------------------------
### Cookiebot Widget Custom Styles
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
Custom CSS rules for the Cookiebot consent dialog, including hiding inactive widgets, setting font sizes, colors, border-radius, and adjusting layout for different screen sizes and states. It also includes specific styling for buttons, links, and dialog positioning.
```css
#CookiebotWidget:not(.CookiebotWidget-inactive) {
display:none;
}
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
};
::selection {
color: #132840;
background: #46D8A0;
}
.navbar-mobile-wrap {
height: calc(100vh);
height: calc(var(--vh, 1vh) * 100);
}
.use-cases-mobile-submenu {
height: calc(100vh);
height: calc(var(--vh, 1vh) * 100);
}
.integrations-mobile-submenu {
height: calc(100vh);
height: calc(var(--vh, 1vh) * 100);
}
@media only screen and (max-width: 1148px) {
#login-button,
.login-button {
display:none;
}
}
/* Cookiebot minimum.run custom styles */
#CybotCookiebotDialog {
--font-size: 14px;
--color-primary: #43c794;
--border-radius: 4px;
--container-width: 1400px;
}
#CybotCookiebotDialogHeader,#CybotCookiebotDialogPoweredByText,.CybotCookiebotDialogBodyBottomWrapper{
display:none!important
}
#CybotCookiebotDialog *,#CybotCookiebotDialogBodyUnderlay {
font-size:var(--font-size)!important
}
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{
background-color:var(--color-primary)!important;
border-color:var(--color-primary)!important
}
#CybotCookiebotDialogBodyButtonDecline,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
border-color:var(--color-primary)!important;
color:var(--color-primary)!important
}
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton{
border-radius:var(--border-radius)!important
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive{
border-bottom:1px solid var(--color-primary)!important;
color:var(--color-primary)!important
}
#CybotCookiebotDialogTabContent input:checked+.CybotCookiebotDialogBodyLevelButtonSlider{
background-color:var(--color-primary)!important
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink,#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a,#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a,#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink,#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover,#CybotCookiebotDialogDetailBodyContentTextAbout a,#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover{
color:var(--color-primary)!important
}
.CybotCookiebotDialogDetailBodyContentCookieContainerButton{
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
#CybotCookiebotDialog[data-template=bottom]{
top:100%;
-webkit-transform:translate(-50%,-100%);
-ms-transform:translate(-50%,-100%);
transform:translate(-50%,-100%);
border-radius:0!important
}
#CybotCookiebotDialog.CybotEdge{
-webkit-box-shadow:0 30px 70px rgb(0 0 0 / 30%);
box-shadow:0 30px 70px rgb(0 0 0 / 30%);
height:auto;
max-height:70vh;
max-width:100vw;
min-width:100vw;
padding:0;
width:100vw
}
#CybotCookiebotDialog{
left:50%;
max-height:80vh;
top:0;
-webkit-transform:translate(-50%);
-ms-transform:translate(-50%);
transform:translate(-50%)
}
@media screen and (min-width:1280px){
#CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper{
max-width:var(--container-width)!important
}
}
```
--------------------------------
### Webflow Tab Handling via URL Parameter
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This Webflow-specific script retrieves a 'tab' parameter from the URL. If found, it triggers a click event on an element with a class matching the parameter's value, effectively opening a specific tab or section. It includes a helper function `getParam` for URL parsing.
```javascript
var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (!tabName) return;
$('.' + tabName).triggerHandler('click');
function getParam(name) {
name = name.replace(/\\[\\\]/, '\\\\[')
.replace(/\\[\\\\]/, '\\\\]');
var regex = new RegExp('\\[\\?&' + name + '=(\\[^&#\\]*)\\]'),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " "));
}
});
```
--------------------------------
### Schema.org FAQPage Markup
Source: https://www.trackingplan.com/faqs/can-we-trial-trackingplan-before-committing
Provides structured data markup for a Frequently Asked Questions (FAQ) page using Schema.org. It defines a question about trialing Trackingplan and its corresponding answer, detailing the risk-free trial period.
```APIDOC
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "Can we trial Trackingplan before committing? | Trackingplan",
"acceptedAnswer": {
"@type": "Answer",
"text": "Learn more about how to test Trackingplan risk-free with a trial period, allowing your agency to explore its full potential before making a commitment."
}
}
}
```
--------------------------------
### Install Trackingplan via Google Tag Manager
Source: https://www.trackingplan.com/blog/enhancing-data-observability-with-trackingplan-and-google-tag-manager
This guide details the process of integrating Trackingplan into your website using Google Tag Manager. It involves creating a Custom HTML tag, pasting your unique Trackingplan snippet, configuring tag firing priority and options, and setting the trigger to 'All Pages' for continuous monitoring.
```HTML
```
```GTM Configuration
Tag Type: Custom HTML Tag
Tag Configuration:
- Paste your Trackingplan snippet into the HTML text box.
Advanced Settings:
- Tag Firing Priority: 1000
- Tag Firing Options: Once per page
Triggering:
- Select 'All Pages'
```
--------------------------------
### Trackingplan Regex Tester
Source: https://www.trackingplan.com/categories-faqs/installing-trackingplan
Utilize the Trackingplan Regex Tester tool to validate and debug regular expressions. This tool is essential for developers and analysts working with pattern matching in tracking data or configurations.
```TOOL
Trackingplan Regex Tester:
Purpose:
Provides an interactive environment to test regular expressions against sample text.
Functionality:
- Input for regex pattern.
- Input for test string.
- Output showing matches, groups, and overall validity.
Use Cases:
- Validating URL patterns for tracking parameters.
- Extracting specific data points from log files or user agent strings.
- Ensuring correct syntax for regular expressions used in Trackingplan rules or filters.
```
--------------------------------
### iOS Mobile Viewport Height Adjustment
Source: https://www.trackingplan.com/categories-faqs/getting-started-with-trackingplan
This script calculates the viewport height and sets a CSS custom property `--vh` on the root document element. This is a common technique to ensure `1vh` units correctly reflect the mobile viewport height, especially on iOS devices where the browser UI can change dynamically. It also includes a resize listener to update the value.
```javascript
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
```
--------------------------------
### Integrate Google Tag Manager
Source: https://www.trackingplan.com/faqs/is-it-necessary-to-provide-payment-information-to-access-the-free-trial-version
Initializes Google Tag Manager by creating a script tag and appending it to the document head. This snippet ensures that Google Tag Manager is loaded and ready to track events.
```javascript
(function(w,d,s,l,i){
w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),
dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MB86DR5');
```
--------------------------------
### Adobe Analytics Guide Link
Source: https://www.trackingplan.com/about/adobe-analytics
A link to a guide on implementing advanced tracking with Adobe Analytics. This entry represents a reference to external documentation rather than a direct code snippet or API definition.
```APIDOC
Guide: Implementing Advanced Tracking with Adobe Analytics
URL: /guides/implementing-advanced-tracking-adobe-analytics
Description: Learn how to boost your digital strategy and optimize your online presence with Trackingplan's expert guides on Adobe Analytics.
```
--------------------------------
### UTM Parameter Examples
Source: https://www.trackingplan.com/blog/effective-monitoring-of-utm-naming-conventions-best-tracking-practices
Illustrates common variations in UTM parameter values for source and medium, emphasizing the need for standardization to prevent analysis errors.
```APIDOC
UTM Parameters:
Source Examples:
- Facebook
- facebook
- facebook.com
- FB
- fb
- FB-Ad
- facebook Ad
Medium Examples:
- Ad
- PPC
- CPC
- PAID
- Paid
- cpc
- paid-ad
- ppc
- ad
```
--------------------------------
### Schema.org FAQPage Markup
Source: https://www.trackingplan.com/faqs/will-the-installation-script-interfere-with-our-clients-site-or-cause-security-issues
This JSON-LD snippet provides structured data for a FAQ page using Schema.org. It defines a `FAQPage` with a single `Question` and its corresponding `Answer`, detailing that Trackingplan's script is lightweight, non-intrusive, and secure, ensuring no impact on client websites.
```JSON
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "Will the installation script interfere with our client’s site or cause security issues? | Trackingplan",
"acceptedAnswer": {
"@type": "Answer",
"text": "Trackingplan’s script is lightweight, non-intrusive, and built with security in mind, ensuring zero impact on your clients' websites."
}
}
}
```
--------------------------------
### Schema.org FAQPage Example
Source: https://www.trackingplan.com/faqs/is-trackingplan-suitable-for-agencies-of-all-sizes
A structured data snippet using Schema.org vocabulary to define a Frequently Asked Questions (FAQ) page. It includes a question about Trackingplan's suitability for agencies and its corresponding answer.
```schema.org
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "Is Trackingplan suitable for agencies of all sizes? | Trackingplan",
"acceptedAnswer": {
"@type": "Answer",
"text": "Whether you're a boutique agency or a large enterprise, Trackingplan scales to your needs, offering powerful data monitoring and tracking automation."
}
}
}
```
--------------------------------
### Load Trackingplan Web Font
Source: https://www.trackingplan.com/faqs/how-do-i-get-started
Initializes Trackingplan's web font loading mechanism, specifying Google Fonts to be included. This snippet ensures the necessary fonts are available for the application's UI.
```javascript
TrackingplanWebFont.load({ google: { families: ["Droid Sans:400,700"] }});
```