Adding the Prodio Tracker in Multiple Languages

The Prodio tracker can be integrated into various frameworks and languages. Below are examples for different platforms:

_document.js


import { Html, Head, Main } from 'next/document';
import Script from 'next/script';
 
export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          src="https://collector.Prodio.com/script.js"
          strategy="afterInteractive"
          data-website-id="YOUR_WEBSITE_ID"
          onLoad={() => console.log('Prodio script loaded')}
          onError={(error) => console.error('Prodio script failed to load:', error)}
        />
      </Head>
      <body>
        <Main />
      </body>
    </Html>
  );
}

public/index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
    <script
      defer
      src="https://collector.Prodio.com/script.js"
      data-website-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script
      defer
      src="https://collector.Prodio.com/script.js"
      data-website-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>


import React from 'react';
import { WebView } from 'react-native-webview';
 
export default function App() {
  return (
    <WebView
      source={{
        html: `
          <script
            defer
            src="https://collector.Prodio.com/script.js"
            data-website-id="YOUR_WEBSITE_ID"
          ></script>
        `,
      }}
    />
  );
}


import WebKit
 
let webView = WKWebView()
let html = """
<html>
  <head>
    <script
      defer
      src="https://collector.Prodio.com/script.js"
      data-website-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body></body>
</html>
"""
 
webView.loadHTMLString(html, baseURL: nil)


import android.webkit.WebView
 
val webView = WebView(this)
val html = """
<html>
  <head>
    <script
      defer
      src="https://collector.Prodio.com/script.js"
      data-website-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body></body>
</html>
"""
 
webView.loadData(html, "text/html", "utf-8")


import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Prodio Tracker')),
        body: WebView(
          initialUrl: Uri.dataFromString(
            '''
              <html>
                <head>
                  <script
                    defer
                    src="https://collector.Prodio.com/script.js"
                    data-website-id="YOUR_WEBSITE_ID"
                  ></script>
                </head>
                <body></body>
              </html>
            ''',
            mimeType: 'text/html',
          ).toString(),
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

Accessing the Tracking Code in Prodio

Once you add a website in Prodio, you can obtain the tracking code using the following steps:

Navigate to the Highlights page in Prodio.
- Click the Get Tracking Code button.
Alternatively, click View Details for the website.
- Under the Info section, navigate to the Tracking Code tab.
- Copy the tracking code provided.
Another option is to go to the Products section.
- Click the View CTA button, which redirects you to the Overview page.
- From there, navigate to the Info page and select the Tracking Code tab to find the tracking code.

💡

For detailed guidance, visit our Prodio Help Center or contact support.