Front-end development · Advertising integration

Web ad integration with JavaScript and TypeScript at Stitchers.Space

JavaScript and TypeScript ad scripts, positioned using CSS selectors and checked with QA.

Role
JavaScript Developer
Period at Stitchers.Space
2024
Technologies
JavaScript · TypeScript · Chrome DevTools · CSS selectors

By Case published:

At Stitchers.Space I developed and inserted advertising scripts on high-value advertising sites, including Cuevana. I used browser developer tools to inspect the HTML and identify, through CSS selectors, the elements where ads needed to appear. I developed the scripts with JavaScript and TypeScript and performed QA to check that ads were placed correctly.

Problem

The work required identifying the intended ad positions within each website’s HTML. Scripts needed to insert advertising into those elements, and each integration required a review to confirm its placement.

Solution

I inspected the HTML and DOM with DevTools, identified positions using CSS selectors and inserted scripts developed with JavaScript and TypeScript. I then checked that ads appeared in the intended locations.

I inspected the HTML and DOM with DevTools, identified positions using CSS selectors and inserted scripts developed with JavaScript and TypeScript. I then checked that ads appeared in the intended locations.

  1. DevTools

    Inspect the HTML structure

  2. CSS selectors

    Identify the ad position

  3. JS and TS scripts

    Insert advertising scripts

  4. Ad placement QA

    Check the location of the ads

Work delivered

HTML inspection, script insertion and QA.

  1. DevTools inspection

    I used browser developer tools to inspect the HTML and locate the elements where ads needed to be inserted.

  2. Positions using CSS selectors

    I identified DOM elements with CSS selectors to direct script insertion to the correct positions.

  3. JavaScript and TypeScript scripts

    I developed and integrated advertising scripts in JavaScript and TypeScript, adapting insertion to the elements identified on each website.

  4. Ad placement QA

    After inserting the scripts, I checked ad placement to verify that ads appeared in the intended positions.

Results

Integrated scripts and verified placements.

Website integrations

I inserted advertising scripts on high-value advertising sites, with Cuevana as one example of the work delivered.

Selector-based insertion

Insertion positions were defined using elements identified within each website’s HTML.

Placement checked with QA

Each integration was reviewed to check that ads were correctly placed.

Applied skills

  • JavaScript
  • TypeScript
  • Chrome DevTools
  • DOM analysis
  • CSS selectors
  • Web ad integration
  • Ad placement QA