What are some recommended methods for integrating the Google Adwords Dynamic Remarketing Tag into an AngularJS framework?

I am currently working on a unique way to automatically fill in the google adwords remarketing tag. Here is the structure of the google code:

<script type="text/javascript">
var google_tag_params = {
dynx_itemid: 'REPLACE_WITH_VALUE',
dynx_itemid2: 'REPLACE_WITH_VALUE',
dynx_pagetype: 'REPLACE_WITH_VALUE',
dynx_totalvalue: 'REPLACE_WITH_VALUE',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = {converion-id}; // replace {converion-id} with your conversion id
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<!-- replace {converion-id} with your conversion id -->
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/{converion-id}/?value=0&amp;guid=ON&amp;script=0"/> 
</div>
</noscript>

My goal is to dynamically change the dynx_itemid variable using Angular every time a new page is loaded. I would appreciate any suggestions or feedback. I came across this library https://github.com/mooyoul/angulartics-google-adwords-remarketing-tag, but it only supports the remarketing tag, not the dynamic one.

Thank you

Answer №1

After thoughtful consideration, we decided to streamline our process by developing an angular module that accepts three parameters for the conversion label, value, and currency. This module can then be easily called from any necessary location in our project.

angular.module('project.google.model', [
/*Google Remarketing Module*/
]).service('GoogleModel', [function () {
    var model = this;
    model.trackConversion = function (label, value, currency) {

        window.google_trackConversion({
            google_conversion_id: xxxxxxx,
            google_conversion_language: "en",
            google_conversion_format: "3",
            google_conversion_color: "ffffff",
            google_conversion_label: label,
            google_conversion_value: value,
            google_conversion_currency: currency,
            google_remarketing_only: false
        });
    }
}]);

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

THREE.js distributes particles uniformly across intricate 3D models

I am in search of a method to achieve a similar effect as seen in this . My main focus is on the potential for evenly distributing particles (or vectors) like in the above example, but within a complex model that has been imported from Blender. Is it fea ...

AngularJS in action for a new Widget Framework

I am working on a project that requires creating a page similar to iGoogle. This page will consist of various drag-and-drop widgets, with each widget representing a distinct application. Does anyone have any advice or recommended links for this type of pr ...

Struggling to meet PWA lighthouse test requirements even with service worker correctly installed

Recently, I've been diving into PWA development and I've encountered a roadblock. Despite successfully setting up my service worker and caching files, my app is not receiving the PWA mark for being installable when tested with Lighthouse. I' ...

Navigating the complexities of transferring data between components

I recently started working with Angular 6 and encountered an issue while trying to share data in my project. Below is the code snippets: 1) Component Sidebar: selectedCategory(type:any) { this.loginService.categoryType = type; // need to pass this d ...

Styling Tables Dynamically With HTML, CSS, and JavaScript Based on Data

Although I've already searched for solutions, nothing seems to be working, so I'm reaching out again. My issue involves an HTML table: <table class="table1"> <tr> <th>Rank</th> <th>Na ...

Check the vuelidate required function in Vye.js for ensuring that all necessary fields

I am currently utilizing the vuelidate plugin for form validation. import { required, maxLength } from 'vuelidate/lib/validators'; In my Vue component, I have a method called isFinishedFill(): methods: { isFinishedFill() { return !!this. ...

Searching for multiple words in a table using jQuery

I have a JavaScript function that searches for a specific word in a table. For example: TABLE <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Band Name</th> </tr> ...

Obtain information stored locally when an internet connection is established

I'm currently facing an issue with my Local Storage data retrieval process in Vuejs while being online. My ToDo app setup consists of Vuejs, Laravel, and MySQL. When the internet connection is available, I store data in localStorage. The ToDo app has ...

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

Is it possible to determine if the process for changing Three.js material has been successfully completed?

Is it possible to determine the completion of this process? material.map = new THREE.Texture( canvas ); material.map.needsUpdate = true; If not, sometimes the final result will be a black snapshot. var snapshotData = renderer.domElement.toDataURL(strMi ...

Tips for sending a file via Ajax using the POST method?

While there is no shortage of information on this topic, I am interested in discussing the process of uploading a file to a server using Ajax or a similar method. # HTML <form method="post" id="Form" enctype="multipart/form-data"> {% csrf_token %} ...

Issue with promises in angular.js + node.js/electron integration is causing malfunctions

I have integrated angular.js with electron and node-orm to communicate with a database. The find/get functions in Node-orm are asynchronous, so I attempted to use Promises in a service to retrieve data like this: app.service('SearchService', fu ...

transferring the $scope variable to a function within AngularJS

After posting a similar question on Stack Overflow yesterday, I found that there is a slight difference in my current issue. I am attempting to develop a versatile function in AngularJS that can modify a scope object (non-primitive). However, it seems to b ...

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

Error in jQuery deferred: undefined property 'then' cannot be read

I am attempting to store the contents of an array in cache before utilizing it throughout my program. Using jQuery deferred objects, I believed I had a grasp on the concept, but it seems like there might be a missing piece. Please refer to the code snippet ...

The second JSP page fails to load following an AJAX POST request

The following code snippet is found in page1.jsp. $.ajax({ type: "post", url: "page2.jsp", data: newdata, success:function(msg){ return msg; } ...

In mongoose and nodejs, there is no method called .find()

I am encountering an issue while attempting to locate by id and receiving the error bankApp.find is not a function. Below is my schema: import {model, Schema} from "mongoose"; const StatusResponse = new Schema({ uniqueKey: {type: String, trim: true, ...

Adding data to a multidimensional array in JavaScript

I am in need of creating a multidimensional JavaScript array dynamically, following this specific structure: array_answers[0][1]:"yes" array_answers[1][2]:"no" array_answers[2][2-subquestion]:"text input" array_answers[3][8]:"yes" array_answers[4] ...

Is there a way to ensure the req.body retrieved from a form is not undefined?

Every time I submit a form with information, the response comes back as undefined. I have provided the code below for reference. If I include the (enctype="multipart/form-data") in the form, I do not receive any data in the body (req.body). However, if I e ...

Editable span Option

One of my skills includes creating a dynamic contenteditable span within text that can expand and contract, as well as wrap around multiple lines without taking up the entire width: div { width: 100px; background: #f00; padding: 5px; } span { bo ...