execute regular javascript with angualrjs

Seeking to integrate legacy javascript code for affiliate tracking into an angularjs app

<script type="text/javascript">
        //<![CDATA[ 

        /*** Do not change ***/
        var AWIN = {};
        AWIN.Tracking = {};
        AWIN.Tracking.Sale = {};

        /*** Set your transaction parameters ***/
        AWIN.Tracking.Sale.amount = '{{order_total}}';
        AWIN.Tracking.Sale.orderRef = '{(order_id}}';
        AWIN.Tracking.Sale.parts = '{{cats}}';
        AWIN.Tracking.Sale.voucher = '';
        AWIN.Tracking.Sale.currency = 'GBP';
        AWIN.Tracking.Sale.test = '0';
        AWIN.Tracking.Sale.channel = 'aw';
        //]]>
    </script>

Looking for the best approach to include the above code (populating placeholders with angular vars) and then execute this:

    <script src="https://www.dwin1.com/xxxx.js" type="text/javascript" defer="defer"></script>

Any suggestions on how to achieve this? Attempts have been made to place the code within an Angular function without success, as well as passing the vars down to $window and attempting to insert them into CDATA on my end to no avail. Any thoughts?

Note: This code is contained in an HTML page encapsulated within an angularjs controller

javascriptangularjscdata

Answer №1

unfortunately, achieving this directly with angularjs is not possible. To make it work, you'll have to follow the steps outlined below

//Important: Make sure to add this new JS file to your main html

(function() {
    "use strict";

    window.AWIN = {};

    window.populateAwin = function(args) {
        //<![CDATA[ 

        /*** Do not alter ***/
        AWIN.Tracking = {};
        AWIN.Tracking.Sale = {};

        /*** Configure transaction details ***/
        AWIN.Tracking.Sale.amount = args.order_total;
        AWIN.Tracking.Sale.orderRef = args.order_id;
        AWIN.Tracking.Sale.parts = args.cats;
        AWIN.Tracking.Sale.voucher = '';
        AWIN.Tracking.Sale.currency = 'GBP';
        AWIN.Tracking.Sale.test = '0';
        AWIN.Tracking.Sale.channel = 'aw';
        //]]>
    }

}());

Afterward, call the function from your controller by passing the necessary data as demonstrated below

populateAwin({
   order_total: $scope.order_total,
   order_id: $scope.order_id,
   cats: $scope.cats
});

Upon completing the above steps, dynamically include the script in your controller like so:

var scriptEl = document.createElement("script");
scriptEl.type = "text/javascript";
scriptEl.defer = "defer";
scriptEl.src = "https://www.dwin1.com/xxxx.js";

document.body.appendChild(scriptEl);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The YQL Query is currently not returning any results

Can someone provide the YQL Query for extracting movie data from the IMDB website? I am specifically looking to retrieve cast information from the title page, using the input URL provided. Example: Input URL : ...

javascriptjqueryhtmlweb-scrapingyql

Determining the successful completion of an ajax request using jQuery editable plugin

I recently started using Jeditable to enable inline editing on my website. $(".video_content_right .project_description").editable(BASE_URL+"/update/description", { indicator: "<img src='" + BASE_URL + "/resources/assets/front/images/indicator ...

javascriptjqueryajaxjeditable

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

javascriptjqueryasp.netvalidationserver-side-validation

Loading external templates in Angular2 with Webpack2

Attempting to integrate ngtemplate-loader in a project using AngularJs 2 and Webpack 2 is proving challenging. While this setup has been successful in Angular 1.x projects with Webpack 1.x, it encounters an error when running in the browser: Uncaught Type ...

javascriptangularwebpackwebpack-2

Is there a way to customize the Webpack output to incorporate specific options solely for a particular bundle?

Currently, I am using Webpack 4 to build multiple bundles. My requirement is to add the output options libraryTarget and library for a single bundle only. The default configuration looks like this: output: { path: path.resolve(__dirname, 'dist/j ...

javascriptwebpackwebpack-4

Prevent the ability to drag and drop within specific div elements

Having trouble disabling the sortable function when the ui ID is set to "comp". Can't figure out what's going wrong, hoping for some assistance here. $(".sort").sortable({ // start sortable connectWith: ".sort", receive: function ...

javascriptjquery

What could be causing Nextjs13 to fail in recognizing an authentication route, resulting in a 404 error?

I have been working on a project utilizing NextJs v13 with Strapi v4 as the backend. My project includes separate layouts for the site, login, and dashboard. While working on the login section, I implemented NextAuth for authentication. However, upon submi ...

javascriptauthenticationnext.jsbackendstrapi

What is the best way to store multiple forms in a single request using React?

Is there a more efficient way for me to save multiple forms in multiple child components from the parent component using just one API request? I have attempted to utilize Context and reducer, which did work. However, I am unsure if this is the best approa ...

javascriptreactjs

Finding multiple locations with Google Maps API Geocoding

I've created a small JavaScript code to geocode various locations and display them on a map. While I can successfully plot a single location, I'm struggling to get it working for multiple locations. Below is the code that currently works for one ...

javascriptgoogle-mapsgeocoding

Issue with VueJs router-link component

Whenever I click on a vuejs router-link element in my app.blade.php page navigation bar, I keep seeing an error in my console which is displayed below [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent comp ...

javascriptlaravelvue.jsrouterlink

Efficiently refine your search using the combination of checkboxes and dropdown menus simultaneously

I am currently in the process of creating a highly sortable and filterable image gallery that utilizes numerous tags. The inspiration for this project stems from a similar question on Stack Overflow regarding dropdown menus and checkboxes. You can view the ...

javascripthtmljquerycss

Initiate the Html.BeginForm process in an asynchronous manner

Within my ASP.NET MVC 3 application, I am attempting to upload a file using the Html.BeginForm helper, as shown below: <% using (Html.BeginForm("ImportFile", "Home", new { someId = Id }, FormMethod.Post, new { enctype="multipart/form-data" } )) %> ...

javascriptjqueryasp.net-mvc-3callback

Tips on how to efficiently update or insert an object within an array in Vue JS 2

My current item list is displayed below. I am looking to add new items to the list, but if the ID matches an existing entry, I want to update the value of that object. For example: segmentValues: [ { id:1, value:'Foo' }, ...

javascriptarraysvue.jsvuejs2

Encoding large files using the Base64 format

Is there a method to encode a file of, say, 2 gigabytes without splitting it into chunks? I am encountering errors when trying to handle files larger than 2GB due to their size being too large for the filesystem. Breaking the file into smaller chunks is ...

javascriptnode.jsbase64

``Error: GraphQL server unable to initiate due to a failure in the module.exports

While learning GraphQL, I encountered an error when attempting to start a server. const graphql = require('graphql'); const _ = require('lodash'); const { GraphQLObjectType, GraphQLString, GraphQLInt, GraphQLSchema } ...

javascriptnode.jsexpressgraphql

Visualization with D3 - Putting an image at the heart of a circular chart made with SVG

Is it possible to add an image to the center of a donut SVG in D3 charts using JavaScript? I've been attempting to achieve this but haven't had any success so far. Currently, I have inserted the image in HTML, but it does not align with the cent ...

javascripthtmljsond3.js

Discovering the status of a wrapped component using Jest

const wrapper = mount( <ContextProvider> <FreeformEquationQuestionPractice question={question} /> </ContextProvider> ) console.log('freeform state: ', wrapper.childAt(0).instance().state) FreeformEquationQues ...

javascriptreactjsjestjsenzyme

Display new information within a div element seamlessly without refreshing the page

Just a heads-up, I'm new to HTML development... Currently working on a website using Bootstrap. There are some buttons on the left side shown in the screenshot, and my goal is to update the content on the right without having to reload the entire pag ...

javascripthtmlcsstwitter-bootstrap

The latest pathway fails to refresh in NextJs

I've implemented a search bar at the top of my app which directs to /search/[searchId].js page: <Link href={`/search/${search}`}> <button type='submit' className='btn-cta btn-3'>SEARCH</button> < ...

javascriptreactjsnext.js