Spotify Ads Install / Embed Tag | OpsBlu Docs

Spotify Ads Install / Embed Tag

How to install and deploy the Spotify Ads tracking tag or SDK. Covers GTM deployment, direct code installation, mobile SDK setup, server-side collection.

Delivery Options

  • Spotify Pixel: JavaScript tracking for website conversions
  • Google Tag Manager: Centralized tag management
  • Promo Codes: Offline attribution method
  • Custom URLs: UTM-based tracking
  • Third-Party Attribution: Nielsen DAR, Veritone, Podscribe

Spotify Pixel Base Code

Direct Implementation

Install the Spotify Pixel in the <head> section of all pages:

<!-- Spotify Pixel Base Code -->
<script type="text/javascript">
(function(s,p,o,t,i,f,y){s['SpotifyPixelObject']=i;s[i]=s[i]||function(){
(s[i].q=s[i].q||[]).push(arguments)},s[i].l=1*new Date();f=p.createElement(o),
y=p.getElementsByTagName(o)[0];f.async=1;f.src=t;y.parentNode.insertBefore(f,y)
})(window,document,'script','https://pixel.spotify.com/v1/pixel.js','spotify');

spotify('init', 'PIXEL_ID');
spotify('track', 'PageView');
</script>
<!-- End Spotify Pixel Base Code -->

Replace PIXEL_ID with your actual Spotify Pixel ID from Ad Studio.

Conversion Tracking

Purchase Event

<script type="text/javascript">
spotify('track', 'Purchase', {
  value: 99.99,
  currency: 'USD',
  order_id: 'ORDER_12345'
});
</script>

Lead Event

<script type="text/javascript">
spotify('track', 'Lead', {
  lead_type: 'contact_form',
  value: 50.00
});
</script>

SignUp Event

<script type="text/javascript">
spotify('track', 'SignUp', {
  signup_method: 'email',
  subscription_tier: 'premium'
});
</script>

Custom Event

<script type="text/javascript">
spotify('track', 'CustomEvent', {
  event_name: 'video_watched',
  video_id: 'VIDEO_123'
});
</script>

Google Tag Manager Implementation

Create Spotify Pixel Base Tag

  1. Create new tag: Custom HTML
  2. Name: "Spotify Pixel - Base Code"
  3. Paste base code:
<script type="text/javascript">
(function(s,p,o,t,i,f,y){s['SpotifyPixelObject']=i;s[i]=s[i]||function(){
(s[i].q=s[i].q||[]).push(arguments)},s[i].l=1*new Date();f=p.createElement(o),
y=p.getElementsByTagName(o)[0];f.async=1;f.src=t;y.parentNode.insertBefore(f,y)
})(window,document,'script','https://pixel.spotify.com/v1/pixel.js','spotify');

spotify('init', '{{Spotify Pixel ID}}');
spotify('track', 'PageView');
</script>
  1. Trigger: All Pages
  2. Firing Priority: 1

Create GTM Variable for Pixel ID

  1. Create new variable: Constant
  2. Name: "Spotify Pixel ID"
  3. Value: Your Pixel ID

Create Event Tags

Purchase Event Tag:

<script type="text/javascript">
spotify('track', 'Purchase', {
  value: {{Transaction Value}},
  currency: '{{Currency}}',
  order_id: '{{Transaction ID}}'
});
</script>

Trigger: Custom Event - purchase

Lead Event Tag:

<script type="text/javascript">
spotify('track', 'Lead', {
  lead_type: '{{Form Name}}',
  value: 50.00
});
</script>

Trigger: Form Submission - All Forms

Promo Code Tracking

For audio ad attribution without pixel:

Generate Unique Codes

// Generate unique promo codes for each campaign
function generateSpotifyPromoCode(campaignId) {
  return 'SPOTIFY' + campaignId.toUpperCase() + Math.random().toString(36).substr(2, 5).toUpperCase();
}

// Example codes
const promoCodes = {
  'campaign_1': 'SPOTIFYCMP1ABC12',
  'campaign_2': 'SPOTIFYCMP2XYZ34',
  'campaign_3': 'SPOTIFYCMP3QWE56'
};

Track Promo Code Usage

<script>
// When user enters promo code
function trackPromoCode(code) {
  // Send to your analytics
  fetch('/api/promo-code-redemption', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      code: code,
      timestamp: Date.now(),
      source: 'spotify_audio_ad'
    })
  });

  // Also track with Spotify pixel if available
  if (typeof spotify !== 'undefined') {
    spotify('track', 'PromoCodeUsed', {
      code: code
    });
  }
}

// Checkout form integration
document.getElementById('promo-code-field').addEventListener('change', function(e) {
  const code = e.target.value.toUpperCase();
  if (code.startsWith('SPOTIFY')) {
    trackPromoCode(code);
  }
});
</script>

Custom URL Tracking

UTM Parameters for Audio Ads

Include custom landing pages in audio creative:

https://yourwebsite.com/spotify-offer?utm_source=spotify&utm_medium=audio&utm_campaign=summer_2024&utm_content=podcast_genre

Track UTM Parameters

// Extract and store UTM parameters
function trackSpotifyUTM() {
  const urlParams = new URLSearchParams(window.location.search);

  if (urlParams.get('utm_source') === 'spotify') {
    const spotifyData = {
      source: 'spotify',
      medium: urlParams.get('utm_medium'),
      campaign: urlParams.get('utm_campaign'),
      content: urlParams.get('utm_content')
    };

    // Store in session
    sessionStorage.setItem('spotify_attribution', JSON.stringify(spotifyData));

    // Track with pixel
    if (typeof spotify !== 'undefined') {
      spotify('track', 'SpotifyVisit', spotifyData);
    }
  }
}

// Run on page load
trackSpotifyUTM();

Vanity URL Tracking

Create memorable URLs for audio ads:

Redirect Setup

// Server-side redirect (Node.js example)
const express = require('express');
const app = express();

app.get('/spotify', (req, res) => {
  // Track the visit
  trackSpotifyVanityURL('spotify');

  // Redirect to main page with UTM
  res.redirect('/?utm_source=spotify&utm_medium=audio&utm_campaign=vanity_url');
});

app.get('/spotify-premium', (req, res) => {
  trackSpotifyVanityURL('spotify-premium');
  res.redirect('/premium?utm_source=spotify&utm_medium=audio&utm_campaign=premium_offer');
});

function trackSpotifyVanityURL(path) {
  // Log to database
  console.log(`Vanity URL visited: ${path}`);
}

Third-Party Attribution Integration

Nielsen DAR (Digital Audio Ratings)

<!-- Nielsen DAR Tracking Code -->
<script type="text/javascript">
var nielsenConfig = {
  apid: "YOUR_NIELSEN_APP_ID",
  sfcode: "dcr",
  apn: "Your App Name"
};

(function() {
  var d = document, c = d.createElement, s = d.getElementsByTagName('script')[0];
  var n = c('script'); n.type = 'text/javascript'; n.async = true;
  n.src = '//cdn-gl.imrworldwide.com/conf/YOUR_CLIENT_ID.js';
  s.parentNode.insertBefore(n, s);
})();
</script>

Podscribe Attribution

For podcast ad attribution:

// Podscribe pixel (if provided by Podscribe)
(function() {
  var ps = document.createElement('script');
  ps.type = 'text/javascript';
  ps.async = true;
  ps.src = 'https://tracking.podscribe.com/pixel.js?campaign=CAMPAIGN_ID';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ps, s);
})();

Mobile App Tracking

For Spotify ad attribution in mobile apps:

iOS Deep Linking

// Handle deep link from Spotify ad
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

    // Parse Spotify campaign parameters
    if url.host == "spotify-campaign" {
        let components = URLComponents(url: url, resolvingAgainstBaseURL: true)
        let campaignId = components?.queryItems?.first(where: { $0.name == "campaign_id" })?.value

        // Track attribution
        trackSpotifyAttribution(campaignId: campaignId)

        return true
    }

    return false
}

Android Deep Linking

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Handle Spotify deep link
    intent?.data?.let { uri ->
        if (uri.host == "spotify-campaign") {
            val campaignId = uri.getQueryParameter("campaign_id")
            trackSpotifyAttribution(campaignId)
        }
    }
}

Testing & Validation

Browser Console Test

// Check if Spotify pixel loaded
if (typeof spotify !== 'undefined') {
  console.log('✓ Spotify Pixel loaded');

  // Fire test event
  spotify('track', 'TestEvent', {
    test: true,
    timestamp: Date.now()
  });

  console.log('✓ Test event fired');
} else {
  console.error('✗ Spotify Pixel not loaded');
}

Network Tab Verification

  1. Open Developer Tools → Network tab
  2. Filter by "spotify"
  3. Look for requests to pixel.spotify.com
  4. Verify event parameters in request payload

Validation Checklist

  • Base code loads on all pages
  • Pixel ID is correct
  • PageView event fires on page load
  • Conversion events fire at correct moments
  • Promo codes are unique and tracked
  • Custom URLs include proper UTM parameters
  • Consent management integrated
  • Test in staging before production
  • Verify events in Ad Studio dashboard
Back to top